html - 合并的 Colspan 中的字体大小导致其他行中的列宽发生变化

Question

第二行中的第一个黑色列应该更细 (1%)，但第一行中的大字体导致它太宽。事实上，第二行第一列的宽度随着第一行文本字体大小的变化而变化。为什么？这些行不是独立的吗？

<table style="background-color:#420E0E;height:100%;width:100%;position:absolute;top:0;bottom:0;left:0;right:0;">
  <tr style="height:5%;">
    <td colspan="2">
      <table style="border:1px solid #fff;width:100%;">
        <tr>
          <td style="border:1px solid #fff;color:white;font-size:100pt;">Home</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr style="height:95%;">
    <td style="background-color:#000000;border:1px solid #fff;width:1%;"></td>
    <td style="background-color:#422E0E;"></td>
  </tr>
</table>

P.S.，似乎与此帖子类似: Colspan on cell in one row seems to prevent setting TD width in all the other rows. Why?

Answer 1

这是因为您没有在第二行第二列中提到宽度。

将 width:99% 应用于第二列。

这是因为你的表有 table-layout:auto 属性...这意味着列 宽度 由单元格中最宽的牢不可破的内容设置。

堆栈片段

<table style="background-color:#420E0E;height:100%;width:100%;position:absolute;top:0;bottom:0;left:0;right:0;">
  <tr style="height:5%;">
    <td colspan="2">
      <table style="border:1px solid #fff;width:100%;">
        <tr>
          <td style="border:1px solid #fff;color:white;font-size:100pt;">Home</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr style="height:95%;">
    <td style="background-color:#000000;border:1px solid #fff;width:1%;"></td>
    <td style="background-color:#422E0E;border:1px solid #fff;width:99%;"></td>
  </tr>
</table>