Html 为什么我的表格单元格宽度在 Chrome 中是错误的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12212608/
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
Why is my table cell width wrong in Chrome?
提问by Urbycoz
I've got a table with two rows. The first row just has three cells. The second row has two cells, with the first cell containing another table that needs to fill the whole cell.
我有一张有两行的桌子。第一行只有三个单元格。第二行有两个单元格，第一个单元格包含另一个需要填充整个单元格的表格。
<table border="1" style="border-collapse:collapse;">
<tr>
<td style="WIDTH: 205px;">1</td> <!--This width doesn't apply in Chrome-->
<td style="width:100%;">2</td>
<td style="WIDTH: 5px;">3</td>
</tr>
<tr>
<td colspan="2">
<TABLE width="100%" border="1" style="border-collapse:collapse;table-layout: fixed;">
<TR>
<TD style="width:130px;">
A</TD>
<TD style="width:90px;">
B</TD>
<TD style="width:230px;">
C</TD>
</TR>
</TABLE>
</td>
<td>
D
</td>
</tr>
</table>
Simple enough, really....or so I thought.
很简单，真的……或者我是这么想的。
It appears as I would expect in IE. But Chrome seems to not apply the width of the first cell correctly. It seems to be affected by the table in the cell below.
它看起来就像我在 IE 中所期望的那样。但是 Chrome 似乎没有正确应用第一个单元格的宽度。它似乎受到下面单元格中表格的影响。
Why is this happening, and how can I get around this?
为什么会发生这种情况，我该如何解决？
回答by Richard de Wit
Two things you should do:
你应该做的两件事：
- On the table element, use
table-layout: fixed; - Insert columns and give them a width
- (You could also assign width to table headers/cells of the first row)
- 在表格元素上，使用
table-layout: fixed; - 插入列并给它们一个宽度
- （您还可以为第一行的表格标题/单元格分配宽度）
Like this:
像这样：
<table border="1" style="table-layout: fixed; width: 100%;">
<colgroup>
<col style="width: 205px;">
<col style="width: auto;">
<!-- Use "width: auto;" to apply the remaining (unused) space -->
<col style="width: 5px">
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!-- Etc. -->
