如何使表td占用整个宽度使用CSS？

Question

我正在制作一个表格移动响应的网站。我如何使表td占用整个全宽（100％）使用CSS？

<table> 
    <tr> 
     <td>Column One</td> 
     <td>Column Two</td> 
    </tr> 
</table> 

要读取彼此靠近的两列信息太困难。

Answer 1

首先，你需要确保你的表中有100％的宽度，那么你可以做的th和td相同

table, td { 
    width: 100%; 
} 

编辑： 因为你编辑了原来的职位，你应该给首款TD类

<td class="first"> 

td.first { 
    width: 100%; 
} 

这将导致第一列使用尽可能多的网页，因为它可以和第二个TD将只是足够宽的内容。如果你不想让文字换行或者其他东西，你可能也必须给它一个宽度。

Answer 2

这将显示一个单元格低于其他：

td {display:block;width:99.9%;clear:both} 

，或者由@nux指出，

td {display:block; box-sizing:border-box; clear:both} 

要么应该够了，虽然微软的浏览器不能强迫你可能需要这些专有标记;那么如果人们打算在手机上使用浏览器，他们不会购买微软手机，所以问题很小。