为啥我的表格单元格宽度在 Chrome 中错误？

Posted 2023-03-06

【中文标题】为啥我的表格单元格宽度在 Chrome 中错误？

【英文标题】：Why is my table cell width wrong in Chrome?为什么我的表格单元格宽度在 Chrome 中错误？

【发布时间】：2012-08-26 02:38:29

【问题描述】：

我有一个有两行的表。第一行只有三个单元格。第二行有两个单元格，第一个单元格包含另一个需要填充整个单元格的表格。

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

为什么会发生这种情况，我该如何解决？

【问题讨论】：

尝试将<td style="width:100%;">2</td>的宽度设置为auto而不是100%

出于兴趣，您为什么要尝试以这种方式构建表？您的目标是哪种布局？它会保存哪些数据？

@Blowski 我正在使用表格进行页面布局。不要恨我——我只是不知道如何用 div 来做到这一点。

【参考方案1】：

你应该做的两件事：

在表格元素上，使用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. -->

【讨论】：

样式“表格布局：固定；宽度：100%；”桌子上的元素可以发挥一切魔力！非常感谢！！