为什么表格 td 宽度不等于 tr 宽度？答案

【问题标题】：How come a table td width is not equal to a tr width?为什么表格 td 宽度不等于 tr 宽度？
【发布时间】：2016-03-18 11:05:13
【问题描述】：

所以我有这个简单的表格标记：

    <table style="border:none;margin:0;padding:0;width:288px">
      <tr style="padding:0;border:none;margin:0">
        <td style="padding:0;border:none;margin:0;width:288px;">
          <div style="width:288px;margin:0;padding:0;border:none;">xx</div>
        </td>
      </tr>
    </table>

div 和 td 标记在 Chrome 检查器中按预期返回 288 的宽度。但是 tr 和 table 返回 292。这 4 个额外的像素来自哪里？

我正在尝试获取与 td 相同的像素精确表。有什么想法吗？

【问题讨论】：

在 Chrome 的网络检查器中查看 <td> 元素的应用样式，也许？
CSS table default padding or margin的可能重复

标签： html css

【解决方案1】：

在某些情况下，在 table-element 上设置以下 css 将使所有内容都可以听！

table-layout: fixed;

【讨论】：

【解决方案2】：

试试这个：

<table style="border:none;margin:0;padding:0;width:288px;-webkit-border-horizontal-spacing:0;">
  <tr style="padding:0;border:none;margin:0">
    <td style="padding:0;border:none;margin:0;width:288px;">
      <div style="width:288px;margin:0;padding:0;border:none;">xx</div>
    </td>
  </tr>
</table>

【讨论】：

【解决方案3】：

尝试添加“border-collapse:collapse;”为您的桌子添加样式。

在标准 HTML 中，该属性设置为“单独”，为您的表格添加（此处不需要的）填充。

【讨论】：