我有一个包含两行的表格。第一行只有三个单元格。第二行有两个单元格,第一个单元格包含另一个需要填充整个单元格的表格。
<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>
很简单,真的……我是这么想的。
它在 IE 中的显示符合我的预期。但是 Chrome 似乎没有正确应用第一个单元格的宽度。它似乎受到下面单元格中表格的影响。
为什么会发生这种情况,我该如何解决?
最佳答案
你应该做的两件事:
- 在表格元素上,使用
table-layout: fixed;
- 插入列并给它们一个宽度
- (您还可以为第一行的表头/单元格分配宽度)
像这样:
<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. -->
关于html - 为什么我的 Chrome 表格单元格宽度错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12212608/