为什么两个表不能正确对齐？

Question

我正在维护一个非常旧的 Web 项目，并发现对齐问题。似乎是很简单的 HTML 或 CSS 问题，但我想不通。

应用程序在后面的代码中生成两个表（填充第二个表的内容）并将它们堆叠起来，如下所示：

<table border="1">
  <tr>
    <td width="70%" align="center">Description</td>
    <td width='75px'>Header1</td>
    <td width='75px'>Header2</td>
    <td width='75px'>Header3</td>
  </tr>

</table>

<table border="1">
  <tr>
    <td width='70%'>
      <input type="text" name="first_name" value="Software" style="width:100%" />
    </td>
    <td width='75px'>
      <input type="text" value="2000" style="width:100%" />
    </td>
    <td width='75px'>
      <input type="text" value="1" style="width:100%" />
    </td>
    <td width='75px'>
      <input type="text" value="2" style="width:100%" />
    </td>
  </tr>

</table>

第一个表格用作标题，而第二个表格包含详细信息行。因此每个标题都应与其内容正确对齐。但是当我调整窗口大小时，对齐就搞砸了。

我只是想知道为什么会发生这种情况，因为表格遵循相同的结构。唯一的区别是第二个表使用了一些输入元素而不是纯文本。

Answer 1

这就是表格的工作方式。第一个表格的内容太大，无法像第二个表格那样缩小表格单元格。快速检查是更改第一个表中的文本，例如看这个小提琴：https://jsfiddle.net/q4zzvcra/

另外，td width="75px" 必须是 td width="75" 丢弃像素

td 不再支持 html 5 宽度，请改用 css，请参阅此帖子：HTML 'td' width and height

Answer 2

我在https://jsfiddle.net/9p37p2en/ 尝试过。

唯一的区别是第二个表格使用了一些输入元素而不是纯文本。

这正是你的问题。文本节点永远不会缩小到最长单词的最小宽度之外，因此除非您摆脱表格中的溢出，否则表格单元格不会缩小到小于该值。然而，文本 INPUT 字段可以缩小到只有几个 px。

还有：

• 如果在同一个表格中存在具有相对宽度的单元格，则会忽略表格单元格中的绝对宽度。您可以安全地删除width=75px，它根本没有任何作用。
• 您不应使用td 的width 和align 属性。将其样式或类属性与正确的 CSS 一起使用。