html - 响应式 Wordpress 表格问题

Question

下午好，

我是一个初学者，所以和我一起待在这里......我正在帮助设计我们公司的网站，我们在页面顶部有一个标题，其中充满了供观众导航的 anchor 通过我们的页面。然而，每当我们尝试将其缩小到我们的手机或平板电脑尺寸时，该表格就会完全崩溃。

该表全部基于百分比，我无法弄清楚为什么会这样。这是整个表格的代码，包括 anchor :

<a name="top"></a>
<table class=" aligncenter" style="width: 74%; height: 30px;" cellpadding="0">
<tbody>
<tr>
<td style="width: 25%; text-align: left; vertical-align: bottom;" scope="row">
<h4>                  Web Commercial</h4>
</td>
<td style="width: 60%; text-align: right; vertical-align: middle;" scope="row"><span style="color: #808080;">         <a href="#cameras"><span style="color: #808080;">Cameras</span></a>    <a href="#directors"><span style="color: #808080;">Directors</span></a>     <a href="#branded"><span style="color: #808080;">Branded Content</span></a>     <a href="#mediadelivery"><span style="color: #808080;">Media Delivery</span></a>     <a href="#resolution"><span style="color: #808080;">Resolution</span></a>     <a href="#pricing"><span style="color: #808080;">Pricing</span></a></span></td>
<td style="width: 30%; text-align: left; vertical-align: bottom;" scope="row"><span style="color: #808080;">       <img class="alignnone wp-image-1604 size-full" src="http://visualicreative.com/wp-content/uploads/2014/06/Buy-Now-actual-size-2.png" alt="" width="65" height="33" /></span></td>
<td style="width: 100%;" scope="row"></td>
</tr>
</tbody>
</table>
<img class="aligncenter wp-image-1526" src="http://visualicreative.com/wp-content/uploads/2014/06/Line.jpg" alt="" width="920" height="1" />

这是网站:http://visualicreative.com/products/advertising/web-commercial-html/

这是我所说内容的屏幕截图:https://flic.kr/p/nU3ita

任何帮助将不胜感激，因为我已经筋疲力尽地试图解决这个问题。热烈欢迎使您能够快速创建表格以进行格式化(创建 2 或 3 个不同的列)的插件建议。

非常感谢。

乙肝

Answer 1

我会用这样的东西替换整个表: JSFiddle Demo

HTML:

<ul class="nav cf">
    <li><a href="#">some link</a></li>
    <li><a href="#">some link</a></li>
    <li><a href="#">some link</a></li>
    <li><a href="#">some link</a></li>
    <li><a href="#">some link</a></li>
</ul>

CSS

/* navigation styles */
.nav { width:100%; margin:0 auto; padding:0; list-style:none; }
.nav li{ float:left; }
.nav li a { display:inline-block; margin:10px; padding:10px; background:#eee; }

/* media-query - resize window to see. */
@media all and (max-width: 500px) {
    .nav li { width:100%;float:none; }
    .nav li a { display:block; margin:10px; padding:10px; }

}


/* micro clear fix hack. */
.cf:before,
.cf:after { content: " "; display: table;   }
.cf:after { clear: both;  }