在 WordPress 中制作一个响应式表格。

Posted

技术标签:

【中文标题】在 WordPress 中制作一个响应式表格。【英文标题】：Make a responsive table within WordPress. 【发布时间】：2016-01-26 01:05:08 【问题描述】：

我知道这个堆栈上已经发布了很多关于响应式表的问题，但相信我，我已经解决了所有问题，但还没有找到解决问题的方法。或者也许我不知道我在寻找什么，这就是为什么我不得不在这里问一个问题。

手头的问题很简单。我正在制作一个 wordpress 网站。我不完全喜欢主题定价表，所以我接受了自己制作的挑战。这是我需要此表的 Wordpress 页面的链接： http://www.desklers.com/uae/undergraduate-packages

所以我的桌子很好，但我无法让它响应。 以下是我在 wordpress 中放入我的视觉作曲家的原始 html 小部件的 html：

<style type="text/css">    
/*General styles*/




/*Features table------------------------------------------------------------*/
@media screen and (max-width: 640px) 
    .features-table 
        overflow-x: auto;
        display: block;
    

.features-table

font-family:'Open Sans';

  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  text-shadow: 0 1px 0 #fff;
  color: #2a2a2a;
  background: #fafafa;  
  background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff); /* Firefox 3.6 */
  background-image: -webkit-gradient(linear,center bottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff)); 


#check 
color: #26CCA4;
font-size:20px;

#cross 
color: #E74A4A;
font-size: 20px;

.features-table td

  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid #cdcdcd;
  box-shadow: 0 1px 0 white;
  -moz-box-shadow: 0 1px 0 white;
  -webkit-box-shadow: 0 1px 0 white;
  white-space: nowrap;
  text-align: center;


/*Body*/
.features-table tbody td

  text-align: center;




.features-table tbody td:first-child

  width: auto;
  text-align: left;


.features-table td:nth-child(2), .features-table td:nth-child(3), .features-table td:nth-child(4)

  background: #DADADA;
  background: #E3E3E3;
  border-right: 1px solid white;



.features-table tr:nth-child(even)

  background: #e7f3d4;  
  background: #E3E3E3;


/*Header*/
.features-table thead td

   font-family: 'Open Sans';
   font-size: 16;
   color: white;
   line-height:16px;
   font-weight:100;
   font-variant:small-caps;

  -moz-border-radius-topright: 10px;
  -moz-border-radius-topleft: 10px; 
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top: 1px solid #eaeaea; 


.features-table thead td:first-child

  border-top: none;


/*Footer*/
.features-table tfoot td


  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px; 
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom: 1px solid #dadada;


.features-table tfoot td:first-child

  border-bottom: none;





    </style> 

    <div id="main">

        <table class="features-table">
                <thead>
                    <tr>
                        <td></td>
                        <td style="background-color:#000000;"><div class="box">
   <div class="ribbon"><span>FEATURED</span></div><p style=" color: white; font-size:30px; font-weight:100;"> Unlimited</p></div></td>
                        <td style="background-color:#229BAA;"><p style=" color: white; font-size:30px; font-weight:100;">Premium</p></td>
                        <td style="background-color:#FEFEFE;"><p style=" color: black; font-size:30px; font-weight:100;">Basic</p></td>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td></td>
                        <td><a class="mk-button outline-btn-dark button-562cf9ad35f16 light outline-dimension medium pointed   " target="_self" href="http://www.desklers.com/uae/product/undergraduate-admission/"><span style="font-size:15px;">Get This Plan</span></a></td>
                        <td><a class="mk-button outline-btn-dark button-562cf9ad35f16 light outline-dimension medium pointed   " target="_self" href="http://www.desklers.com/uae/product/undergraduate-admission/"><span style="font-size:15px;">Get This Plan</span></a></td>
                        <td><a class="mk-button outline-btn-dark button-562cf9ad35f16 light outline-dimension medium pointed   " target="_self" href="http://www.desklers.com/uae/product/undergraduate-admission/"><span style="font-size:15px;">Get This Plan</span></a></td>
                    </tr>
                </tfoot>                    
                <tbody>
                    <tr>
                        <td></td>
                        <td id="price" style="background-color:#000000;">$5000</td>
                        <td id="price" style="background-color:#2BC2D5;">$3000</td>
                        <td id="price" style="background-color:#FEFEFE; color:black;">$1500</td>
                    </tr>
                    <tr id="one">
                        <td>Number of Colleges Universities</td>
                        <td>20</td>
                        <td>10</td>
                        <td>5</td>          
                    </tr>
                    <tr>
                        <td>Number of Countries you can apply</td>
                        <td>Unlimited</td>
                        <td>2</td>
                        <td>1</td>          
                    </tr>
                    <tr>
                        <td>Money Back Guarantee</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>
                    <tr>
                        <td>High school planning</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>
                    <tr>
                        <td>Academic advising and coaching</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>
                    <tr>
                        <td>Transcript evaluations</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>
                    <tr>
                        <td>Admission Documents Handling</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>
                    <tr>
                        <td>Guidance in SAT, ACT and Subject Tests</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>
                    <tr>
                        <td>SAT, ACT and Subject Tests Preparation and Coaching</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>
                    <tr>
                        <td>Athletic Recruitment</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>
                    <tr>
                        <td>Guidance in selecting best fit colleges</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                    </tr>
                    <tr>
                        <td>Developing and finalizing a college list</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>
                    <tr>
                        <td>Guidance and coaching about how to write winning Application Essays and Supplements</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                    </tr>
                    <tr>
                        <td>Proof reading and feedback on College Essays and Supplements</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                    </tr>
                    <tr>
                        <td>Discussing, helping, developing and finalizing College Ideas for Essays and Supplements</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>
                    <tr>
                        <td>Proof Reading and finalizing Application Essays and Supplements</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>
                    <tr>
                        <td>Letters of Recommendation</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>
                    <tr>
                        <td>Leadership opportunities</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>
                    <tr>
                        <td>Summer strategies</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>
                    <tr>
                        <td>Social Work Opportunities</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>
                    <tr>
                        <td>Extra-Curricular activities guidance</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>
                    <tr>
                        <td>Guidance in Scholarship applications</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                    </tr>
                    <tr>
                        <td>Assistance in filling scholarship applications</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>
                    <tr>
                        <td>Guidance in CSS and other financial aid applications</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                    </tr>
                    <tr>
                        <td>Assistance in filling CSS and other financial aid applications</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>
                    <tr>
                        <td>Follow-ups</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>
                    <tr>
                        <td>Visa Application Guidance and Handling</td>
                        <td><i class="mk-moon-checkmark" id="check"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                        <td><i class="mk-icon-remove" id="cross"></i></td>
                    </tr>



                </tbody>
        </table>
    </div>
 </body>

这是我的代码的 JSfiddle：https://jsfiddle.net/d96q4h3d/

使用媒体查询并将overflow-x 设置为auto，我已经能够使我的表格可以沿x 轴拖动。但是我希望表格在页面加载时完整显示，以便用户可以看到完整的表格。然后，如果他想仔细观察，他可以放大任何特定的部分。

任何有关此问题的帮助将不胜感激。我在谷歌上做了很多研究，但一直找不到一个特定的解决方案来解释我如何在页面上查看完整的表格。

谢谢

【问题讨论】：

【参考方案1】：

先删除white-space: nowrap;

现在您必须将表格设置为最大宽度：（您想要的大小）

像示例中一样，最大宽度为 900px：https://jsfiddle.net/d96q4h3d/7/

如果你想让表格更小，你必须减小&lt;thead&gt;标签的大小，像这样的“#price”id

@media screen and (max-width: 800px) 
    .features-table thead p 
    font-size: 20px !important;
    
    #price 
    font-size: 20px;
    


@media screen and (max-width: 600px) 
    .features-table thead p 
    font-size: 15px !important;
    
    #price 
    font-size: 15px;
    
    .features-table td
    padding: 0px 10px;

并且始终将您的@media 屏幕放在底部的末尾，而不是顶部！

【讨论】：

到目前为止，这似乎是最好的解决方案！非常感谢！ :D 只有一个问题，无限的特色功能区似乎没有随着小提琴中的表格调整大小。你对我如何解决这个问题有什么想法吗？ 你不需要调整它的大小，因为它已经很小了，我的意见是你需要移动它一点，并为 标签添加一些高度，这样它就不会溢出文本太多了。这是更新：jsfiddle.net/d96q4h3d/8（您也可以将其从@media 屏幕中删除，通过 display:none 降低 600px） 【参考方案2】：

这是一个难题，因为表格本身就没有响应性。有许多不同的方法可以达到预期的结果。许多包括使用 javascript。

这里是不同技术的一个很好的总结，包括一个非常聪明的纯 CSS 技术 (#8)，这是我的最爱。

http://exisweb.net/responsive-table-plugins-and-patterns

编辑：

由于您需要在移动设备上显示整个表格，因此适合这种情况的解决方案可能是：

https://github.com/ghepting/jquery-responsive-tables - DEMO

【讨论】：

我已经访问过这个页面。 #8 无效，因为即使这样也不会在小屏幕设备的屏幕上显示完整的表格。由于我对 JS 不是很满意，所以我正在寻找 CSS 解决方案。但很明显，如果我找不到，就必须选择 JS :( 那么用媒体查询以小设备宽度缩放字体怎么样？【参考方案3】：

您是否考虑过在Bootstrap toolkit 的基础上采用WordPress theme？

如果你这样做了，你可以使用this sort of pattern to emit your table，它会很容易响应。

<div class="table-responsive">
  <table class="table">
     your table
  </table>
</div>

Bootstrap 是获取响应式表格和其他 ui 元素的真正好方法；它的开发人员在调试各种浏览器方面做得很好。

【讨论】：

问题是我正在为客户做这个网站。我自己不是专业人士，但在此过程中一直在尝试和学习！因此，客户为他的网站选择了主题并支付了费用，所以我不得不接受它。 此解决方案使表格（有点）响应。基本上只是设置overflow-x: auto;，这使您能够水平滚动表格。 我已经可以做到了。我需要的是让表格调整大小并在小屏幕设备上完全显示在屏幕上，然后用户可以根据需要放大表格。溢出-x 不是这个问题的解决方案。我需要将其关闭并找到另一种方法使表格根据屏幕大小调整大小。 ://

以上是关于在 WordPress 中制作一个响应式表格。的主要内容，如果未能解决你的问题，请参考以下文章

如何让 Marketo 表单在嵌入到响应式 WordPress 网站时做出响应？

如何修复 wordpress 中的响应式图像错误？

如何制作响应式表[关闭]

如何制作具有相同宽度百分比的响应式表格？

如何在响应式表格中获得文本左对齐的全宽列

如何处理内容大的响应式引导 3 表？