相同大小的 HTML 表格列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9861589/
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
HTML table column of equal size
提问by m4n07
With the below code, I get the columns size being different (esp the last column is small) I would like to have all the three columns to be of same size.Thanks.
使用下面的代码，我得到了不同的列大小（特别是最后一列很小）我希望所有三列都具有相同的大小。谢谢。
<html>
<body>
<h4>Two rows and three columns:</h4>
<table border="1" width="100%" height="400" align="top">
<tr style="height: 1">
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>1-3</td>
<td>1-4</td>
</tr>
</table>
</td>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>2-3</td>
<td>2-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>3-1</td>
</tr>
<tr>
<td>3-2</td>
</tr>
</table>
</td>
</tr>
<tr style="vertical-align: top">
</td>
<td>
<table width="100%" border="2" height ="100">
<tr>
<td>4-1</td>
<td>4-2</td>
</tr>
<tr>
<td>4-3</td>
<td>4-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100">
<tr>
<td>5-1</td>
<td>5-2</td>
</tr>
<tr>
<td>5-3</td>
<td>5-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100">
<tr>
<td>6-1</td>
</tr>
<tr>
<td>6-3</td>
</tr>
</table>
</body>
</html>
回答by Sirko
Insert a colgroupelement in your table:
colgroup在表格中插入一个元素：
<table>
<colgroup>
<col style="width: 33%" />
<col style="width: 33%" />
<col style="width: 33%" />
</colgroup>
<tr>
...
</tr>
</table>
回答by stefan bachert
Just set each <td>of the first level table to width="33%"
只需将每个<td>第一级表设置为width="33%"
回答by DevWL
Few fixes to consider
需要考虑的几个修复
<table style="table-layout: fixed; width: 100%;"> <!- set table layout to fixed and width to full width -->
<colgroup>
<col style="width: auto" /> <!- takes the remaining space -->
<col style="width: 33.3333%" /> <!- or use 33.3333% for all instead if you want to occupy full width -->
<col style="width: 33.3333%" />
</colgroup>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
...
</table>
回答by theJollySin
回答by Zemogle
An alternative is to set the css width of the table to 100% e.g.
另一种方法是将表格的 css 宽度设置为 100%，例如
table { width:100% }
The cells should inherit this and be of equal size. That way you are more flexible to different numbers of columns.
单元格应该继承这一点并且大小相同。这样您就可以更灵活地处理不同数量的列。
