表格标题和表格单元格显示不同的宽度

Posted 2023-03-05

【中文标题】表格标题和表格单元格显示不同的宽度

【英文标题】：Table header and table cell display different width

【发布时间】：2019-06-16 04:59:27

【问题描述】：

我需要将表格分成标题和行，以便能够控制滚动。但是现在标题和单元格的列宽似乎有所不同。我正在尝试消除 span 元素上的所有填充和边框。在此示例中，列标题显示为 131 像素。在我的另一种情况下，单元格宽度为 129 像素（小于定义的宽度 130 像素），我无法弄清楚。

<table style="border-collapse: collapse;">
  <thead>
  <tr>
    <th style="width: 130px; padding:0px; border:1px solid;">Column1</th>
  </tr>
  </thead>
</table>
<table formArrayName="scheduleDetail" style="border-collapse: collapse;">
  <tbody>
  <tr>
    <td style="width: 130px;  padding:0px; border:1px solid; box-sizing: border-box;">
      <span style="width: 130px;  padding:0px; border:0px;">
        <a href="javascript:" style="text-decoration: underline; color: blue">1111</a>
      </span>
    </td>
  </tr>
  </tbody>
</table>

【参考方案1】：

似乎 span 上的宽度不适用，除非与 display: inline-block 一起使用。解决了。​​