我知道在这个堆栈上已经发布了很多关于响应表的问题，但是相信我，我已经通过了所有这些问题并且找不到解决问题的方法。或者也许我并不确切地知道我在寻找什么，这就是我在这里被迫提出问题的原因。
手头的问题非常简单。我正在制作一个wordpress网站。我并不完全喜欢主题定价表，所以我接受挑战来制作自己的主题。这是我的Wordpress页面的链接，我需要这个表： http://www.desklers.com/uae/undergraduate-packages
所以我的桌子很好，但是我很难做出响应。 以下是html我在wordpress中放入我的视觉作曲家的原始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轴拖动。但是，我希望在页面加载时表格显示为完整，以便用户可以看到完整的表格。然后，如果他想仔细观察，他可以放大任何特定的部分。
对此问题的任何帮助将不胜感激。我在google上做了很多研究，但一直无法找到解释如何在页面上查看完整表格的特定解决方案。
谢谢
答案 0 :(得分：3)
首先删除white-space: nowrap;
现在你必须使表格最大宽度:(你想要的尺寸）
在示例中，max-width是900px：https://jsfiddle.net/d96q4h3d/7/
如果您希望缩小表格，则必须缩小<thead>标记的大小，并将“#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屏幕放在底部的末尾，而不是顶部！
答案 1 :(得分：1)
您是否考虑过根据WordPress theme采用Bootstrap toolkit？
如果你这样做，你可以使用this sort of pattern to emit your table，它会在没有各种麻烦的情况下做出回应。
<div class="table-responsive">
<table class="table">
your table
</table>
</div>
Bootstrap是获取响应式表和其他ui元素的一种非常好的方法;它的开发人员为各种浏览器调试工作做得很好。
答案 2 :(得分：1)
这是一个难题，因为表本身没有响应。有许多不同的方法可以达到预期的效果。许多包括使用javascript。
这是一个很好的综合了不同的技巧，包括一个非常聪明的纯CSS（＃8），这是我最喜欢的。
http://exisweb.net/responsive-table-plugins-and-patterns
修改
由于您需要在移动设备上显示整个表格，因此针对此案例的合适解决方案可能具体：