Html 如何在CSS中制作具有相等列宽的表格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21495634/
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 a table with equal column widths in CSS?
提问by Village
I have a document containing a table like this:
我有一个包含这样的表格的文档：
<table>
<tr>
<td>
Word
</td>
<td>
Definition
</td>
</tr>
<tr>
<td>
Word
</td>
<td>
Definition
</td>
</tr>
<tr>
<td>
Word
</td>
<td>
Definition
</td>
</tr>
</table>
Using CSS, I need to set all of the cells to 50% width, with text in the left "column" being right-aligned and text in the left column being left-aligned. I've tried many different options, e.g. width: 50%; text-align: left, but the results are always unusual. The results should look like this:
使用 CSS，我需要将所有单元格设置为 50% 宽度，左“列”中的文本右对齐，左列中的文本左对齐。我尝试了许多不同的选项，例如width: 50%; text-align: left，但结果总是不寻常。结果应如下所示：
_________________________
| word | definition |
|____________|____________|
| word | definition |
|____________|____________|
- I cannot adjust the table's actual code directly. I can only modify the CSS style.
- The answer in Make columns of equal width in <table>is not suitable, because I do not know the width of the page, and that width might vary.
- 我无法直接调整表格的实际代码。我只能修改CSS样式。
- Make column of equal width in <table> 中的答案不合适，因为我不知道页面的宽度，并且该宽度可能会有所不同。
How can I set equal-width cells in a two-column table in CSS with everything aligned to the middle?
如何在 CSS 的两列表格中设置等宽单元格，所有内容都对齐到中间？
回答by TechGuy
You can set table-layout: fixed;on your table. Using this you can override the browser's automatic column resizing. Then your browser sets the column width of first column to all.
你可以table-layout: fixed;在你的桌子上设置。使用它，您可以覆盖浏览器的自动列大小调整。然后您的浏览器将第一列的列宽设置为全部。
回答by Itay Gal
The table should have width: 100%property.
See example here
桌子应该有width: 100%属性。
请参阅此处的示例
table{
width: 100%;
border-collapse:collapse;
}
td{
width: 50%;
text-align: left;
border: 1px solid black;
}
About the text alignment you said two different things:
关于文本对齐，您说了两件不同的事情：
Using CSS, I need to set all of the cells to 50% width, with text in the left "column" being right-aligned and text in the left column being left-aligned.
使用 CSS，我需要将所有单元格设置为 50% 宽度，左“列”中的文本右对齐，左列中的文本左对齐。
and then
进而
How can I set equal-width cells in a two-column table in CSS with everything aligned to the middle?
如何在 CSS 的两列表格中设置等宽单元格，所有内容都对齐到中间？
If the first is what you want and you cannot change your HTML you can use td:first-childto style your first column differently.
如果第一个是您想要的并且您无法更改您的 HTML，您可以使用td:first-child不同的样式设置您的第一列。
If the second is your best option, just change the text-alignvalue to center.
如果第二个是您的最佳选择，只需将text-align值更改为center。
回答by Mazhar MIK
I had the same issue in one of my projects, however it got fixed when I combined both the solutions above (Thanks to them). Here is my code snippet :
我在我的一个项目中遇到了同样的问题，但是当我结合上述两种解决方案时它得到了解决（感谢他们）。这是我的代码片段：
.Table{
width: 100%;
table-layout: fixed;
}
