爲什麼兩個表無法正確對齊？

我保持一個很舊的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

爲什麼兩個表無法正確對齊？

回答

相關問題