为什么我的表格单元格宽度错误？

Question

我有一个有两排的桌子.第一行只有三个单元格.第二行有两个单元格,第一个单元格包含另一个需要填充整个单元格的表格.

<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似乎没有正确应用第一个单元格的宽度.它似乎受到下面单元格中的表格的影响.

为什么会发生这种情况,我该如何解决这个问题呢？

Answer 1

你应该做的两件事:

• 在table元素上,使用 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. -->