为什么将宽度样式放在第一个 <td>s 或第二个 html 表格中会有所不同/为什么这些表格呈现不同？答案

【问题标题】：Why is it different putting the width style in the first <td>s or the second in an html table / Why are these tables rendered differently?为什么将宽度样式放在第一个 <td>s 或第二个 html 表格中会有所不同/为什么这些表格呈现不同？
【发布时间】：2017-09-03 16:48:57
【问题描述】：

你能解释一下为什么这两个 HTML 代码在渲染时会产生不同的外观吗？ fiddle1 和 fiddle2

代码的唯一区别是 fiddle1 中style="width: 50px;" 在表格的第一行，而在 fiddle2 中它在第二行。但这会导致每个人的宽度不同。

根据 Chrome 开发工具 fiddle1，两个单元格/列的宽度均为 51px（无论如何都应该是 50px），而在 fiddle2 中，第一个单元格/列的宽度为 @987654325 @width 和第二个50pxwidth。

Fiddle 1 中的标记

<table>
   <tr>
      <td style="width: 50px;">Test</td>
      <td style="width: 50px;">Testing 1123455</td>
   </tr>
   <tr>
      <td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
      <td>B</td>
   </tr>
</table>

Fiddle 2 中的标记

<table>
   <tr>
      <td>Test</td>
      <td>Testing 1123455</td>
   </tr>
   <tr>
      <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
      <td style="width: 50px;">B</td>
   </tr>
</table>

两个小提琴的 CSS

table {
  table-layout: fixed;
  width: 100px;
}

td {
  border: 1px solid black;
  overflow: hidden;
}

【问题讨论】：

标签： html css html-table

【解决方案1】：

这就是“表格布局：固定”的魔力。
如本文所述link

table-layout CSS 属性指定用于布局单元格、行和列的算法。

当值为'fixed'时：表格和列的宽度由table和col元素的宽度或第一行单元格的宽度设置。后续行中的单元格不会影响列宽。

在您的第一种情况下：您指定了第一行列的宽度。渲染算法采用宽度并以该宽度渲染它。你看到的多出的 1px 只是边框宽度。

第二种情况：因为没有指定第一行的宽度。它采用表格宽度并尝试调整其中的行列。至于两列会有三个边框，我们留下 97px 来划分两列。由于像素不能分成小数，因此您会得到 48px 和 49px 的列宽。额外的 1px 用于边框宽度

【讨论】：