表格的宽度因显示而冻结：块

Posted 2023-03-06

【中文标题】表格的宽度因显示而冻结：块

【英文标题】：Table's width frozen because of display: block

【发布时间】：2011-12-01 07:49:12

【问题描述】：

我创建了一个页面，其中包含table 和一些数据。虽然我将表格的宽度设置为父 div 的 80%，但内部的tbody 和其他孩子的宽度被冻结为 450px。

我还注意到，一旦我删除了属性display: block，表格的子项就会正确显示（表格的 100% 宽度）

我是否有特殊原因将宽度冻结在 450 像素？我在我的 CSS 中到处检查，我没有设置这样的规则。

这是我的表的代码：

<div id="maincol">
<table  border="0" cellpadding="1" cellspacing="0" id="dates" class="summary" name="dates" style="display:block">
    <tbody>
        <tr>
                 ...

【问题讨论】：

你为什么首先使用display: block？

对不起，我只是从一个网站上举了一个例子来构建我的布局=s

【参考方案1】：

表格有自己的显示类型：“table”（也是唯一可能的），类似地 tr 和 td 分别有显示“table-row”和“table-cell”

【讨论】：

所以 450px 宽度是浏览器根据显示差异生成的默认值？

450px 可能是几个因素的结果：“#maincol”的宽度是多少？ （理论上 450px 应该是父宽度的 80% 的圆角宽度......你的容器的宽度是 562px 吗？）在你的 CSS 中应用于表格的默认样式是什么？那么“#dates”和“.summary”呢...

div #maincol 的宽度为父 div 的 80%，宽度设置为 100%（我的分辨率为 1139px）

所以...通过仅考虑节点宽度，表的大小应为 728/729px (1139 * 0.8 * 0.8)。这确实很奇怪......它可能是填充和边距的组合，但很难说：P