Html 如何使用css使表格td占据整个宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17957798/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make table td taking up the whole width using css?
提问by Alex
I am making a site with tables mobile responsive. How do I make table td take up the whole full width(100%) using css?
我正在制作一个带有表格移动响应的网站。如何使用 css 使表格 td 占据整个宽度（100%）？
<table>
<tr>
<td>Column One</td>
<td>Column Two</td>
</tr>
</table>
It is too hard to read information in two columns close to each other.
阅读彼此靠近的两列中的信息太难了。
回答by Riccardo Zorn
This will show the cells one below the other:
这将显示一个在另一个下面的单元格：
td {display:block;width:99.9%;clear:both}
or, as noted by @nux,
或者，正如@nux 所指出的，
td {display:block; box-sizing:border-box; clear:both}
either should be enough, although microsoft browser won't oblige and you might need proprietary markup for those; then again if people plan to use a browser on their phone they wouldn't buy a microsoft phone, so the problem is minor.
两者都应该足够了，尽管微软浏览器不会强制要求，您可能需要为这些标记专有标记；再说一次，如果人们打算在手机上使用浏览器，他们就不会购买微软手机，所以问题很小。
回答by Revent
First, you need to make sure that your table has 100% width, then you can do the same with the th and td
首先，你需要确保你的表格有 100% 的宽度，然后你可以对 th 和 td 做同样的事情
table, td {
width: 100%;
}
EDIT: since you edited your original post, you should give the first td a class
编辑：既然你编辑了你的原始帖子，你应该给第一个 td 上课
<td class="first">
td.first {
width: 100%;
}
This will cause the first column to use as much of the page as it can and the second td will be just wide enough for the content. You may have to give it a width too if you don't want your text to wrap or something.
这将导致第一列尽可能多地使用页面，而第二列 td 将刚好足以容纳内容。如果您不希望文本换行或其他什么，您可能也必须给它一个宽度。
回答by rhysclay
The answers above are correct but you need to also make sure you'r td element has a reference for its 100% width otherwise it may not work. You should have this rule set at the start of your stylesheet:
上面的答案是正确的，但您还需要确保您的 td 元素具有 100% 宽度的参考，否则可能无法正常工作。您应该在样式表的开头设置此规则：
body, html {
width: 100%;
}
Take a look at this thread for more info: HTML table td not full width when using display block and 100% width attributes
查看此线程以获取更多信息： HTML table td not full width when using display block and 100% width attributes
