Question

我正在维护一个非常古老的Web项目，并发现了对齐问题。这似乎是非常简单的HTML或CSS问题，但我无法弄清楚。

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

＆＃13;

<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>

＆＃13;

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

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

Answer 1

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

此外，td width="75px"需要td width="75"放弃px

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

Answer 2

我在https://jsfiddle.net/9p37p2en/尝试了这个。

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

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

另外：

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

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

2 个答案: