我正在制作一个表格移动响应的网站。我如何使表td占用整个全宽(100%)使用CSS?如何使表td占用整个宽度使用CSS?
<table>
<tr>
<td>Column One</td>
<td>Column Two</td>
</tr>
</table>
要读取彼此靠近的两列信息太困难。
我正在制作一个表格移动响应的网站。我如何使表td占用整个全宽(100%)使用CSS?如何使表td占用整个宽度使用CSS?
<table>
<tr>
<td>Column One</td>
<td>Column Two</td>
</tr>
</table>
要读取彼此靠近的两列信息太困难。
首先,你需要确保你的表中有100%的宽度,那么你可以做的th和td相同
table, td {
width: 100%;
}
编辑: 因为你编辑了原来的职位,你应该给首款TD类
<td class="first">
td.first {
width: 100%;
}
这将导致第一列使用尽可能多的网页,因为它可以和第二个TD将只是足够宽的内容。如果你不想让文字换行或者其他东西,你可能也必须给它一个宽度。
这将显示一个单元格低于其他:
td {display:block;width:99.9%;clear:both}
,或者由@nux指出,
td {display:block; box-sizing:border-box; clear:both}
要么应该够了,虽然微软的浏览器不能强迫你可能需要这些专有标记;那么如果人们打算在手机上使用浏览器,他们不会购买微软手机,所以问题很小。
我想大多数的移动设备浏览器都OK了桌子,但我倾向于避开他们反正使用的div或[描述列表(http://www.w3schools.com/tags/tag_dl.asp)。只是我的两美分价值。 – Revent
感谢您的回答,我得到它也显示:块; – Alex
由于虚构的移动问题,表格不应避免。如果表格太宽而无法在移动设备中查看,则可以使用媒体查询重新格式化表格。 – cimmanon