为什么两个表无法正确对齐？

我保持一个很旧的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>

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

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

来源

2016-09-22 Jerryszz

你不能修改应用程序来生成一个包含标题的表吗？ –

问题是第一个表的单元格宽度不会调整为小于它们中单个文本单词的大小。如果您必须**使用表格，只需在第一个包含输入的表格中添加第二行：https://jsfiddle.net/saqfnfzs/ – BenM

这就是表格的工作原理。第一个表格的内容太大，无法像第二个表一样缩小表格单元格。快速检查是改变在第一个表中的文本，请参阅本捣鼓例如：https://jsfiddle.net/q4zzvcra/

此外，td width="75px"需要为td width="75"沟PX

HTML 5中的宽度不再为td，使用支持css代替，看到这篇文章：HTML 'td' width and height

来源

2016-09-22 22:30:24

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

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

而这正是你的问题。文本节点永远不会收缩超出最长单词的最小宽度，因此除非您摆脱表格中的溢出，否则表格单元格不会缩小。然而，文本INPUT字段可以缩小，直到几个像素。

另外：

在表格单元中的绝对宽度如果在同一个表中存在与相对宽度细胞被忽略。您可以安全地删除width=75px，它什么都不做。
您不应该使用td的width和align属性。使用它的样式或类属性以及正确的CSS。

来源

2016-09-22 22:33:40

感谢您的解释。我相信目标是保持header1，header2和header3的宽度固定（75px），同时允许Description填充屏幕的其余部分。 – Jerryszz

为什么两个表无法正确对齐？

回答

相关问题