我有一个有两行的表。第一行只有三个单元格。第二行有两个单元格,第一个单元格包含需要填充整个单元格的另一个表格。
<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. -->