【问题标题】: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>

【问题讨论】:

    标签: html html-table width border cell


    【解决方案1】:

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

    【讨论】: