Html 表格上的自动宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2863231/
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
Auto width on tables
提问by Hulk
A html table cols and rows are generated dynamically,
动态生成 html 表 cols 和行，
i.e, for the first instance it could be two rows and there columns. and next time it could be two rows and 10 columns
即，对于第一个实例，它可能是两行和列。下次它可能是两行 10 列
My question is how to adjust the with automatically of the table so that the table always appears 100% in the page adjusting the coulmn size and row size
我的问题是如何自动调整表格的 with 使表格始终出现在页面中调整列大小和行大小的 100%
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
<table>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
Thanks..
谢谢..
回答by Asaph
Using CSS:
使用 CSS：
<style type="text/css">
table { width: 100%; }
</style>
<table>
...
</table>
or using a CSS inline style:
或使用 CSS 内联样式：
<table style="width: 100%">
...
</table>
or using old school HTML:
或使用旧式 HTML：
<table width="100%">
...
</table>
回答by Kerry Jones
Put
放
width="100%"
宽度="100%"
In your table tag -- it will always be 100% width. Is that what you meant?
在您的表格标签中 - 它始终为 100% 宽度。这是你的意思吗？
回答by TheMorph
You might try using a css file in which you could write
您可以尝试使用可以在其中编写的 css 文件
table {
width: 100%;
height: 100%;
}
Or you can prepend following lines in your html file
或者您可以在 html 文件中添加以下几行
<style type="text/css">
table { width: 100%; height: 100%; }
</style>
回答by Hibou57
The best I know so far, is this:
到目前为止，我所知道的最好的是：
.my-table-class {
box-sizing: border-box;
width: 100%;
}
If you don't use box-sizing: border-box;, you will get bad results as soon as your table has paddings and borders. Using width: 100%;is not enough.
如果你不使用box-sizing: border-box;，一旦你的表格有填充和边框，你就会得到不好的结果。使用width: 100%;是不够的。
Hint: the same for an element with display: table;.
提示：对于带有display: table;.
