固定寬度div在td內部時的奇怪行為

Question

這是我正在談論的代碼：

 .box { background: rebeccapurple; height: 50px; width: 180px; border-radius: 6px; margin: 10px; } 

 <table width="100%" border="1"> <tr> <td> <div class="box"></div> </td> <td>Test</td> </tr> </table> 

這是在Chrome 75上運行時的樣子：

http://jsfiddle.net/o198cx7j/

為什么第一欄增長如此之多？ 如果我從div刪除固定寬度，它會恢復正常：

首先， 為什么會發生這種情況？ 第二，我怎樣才能做到這一點？ 我想在td有一個固定寬度的div ，它必須像你使用非固定寬度的div 。

我知道可以將div的固定寬度移動到td或使用CSS網格，但我正在尋找使用表格的替代解決方案 。

Answer 1

這樣做的原因是因為這一行： <table width="100%" 。 表格單元寬度算法讀取180px的固定寬度，並按比例擴展第一個單元格（我不確定為什么）。 如果刪除width屬性並向第二個單元格添加100％寬度，則可以保留框的固定寬度並保留尺寸。

 .second_cell{ width: 100%; } .box { display: flex; background: rebeccapurple; height: 50px; width: 180px; } 

 <table border="1"> <tr height="200px"> <td> <div class="box"></div> </td> <td class="second_cell">Test</td> </tr> </table> 

Answer 2

作為符號鏈接答案的替代方法，您還可以指定每個td具有50％的寬度。

---

關於為什么會這樣，我也同意symlink的答案，但我想添加一些關於規范的信息：

這個比例的東西是表格如何按規格工作（盡管在某些方面，規范使用像“可能”這樣的詞，瀏覽器應該遵循規范，當它模糊時有自己的差異）。

但是，如果表沒有固定寬度，則用戶代理必須先接收所有表數據，然后才能確定表所需的水平空間。 只有這樣才能將這個空間分配給比例列。

更多信息可以在規范中找到： 計算列的寬度

因此，如果沒有具有固定寬度的div，則兩列具有相同的內容寬度“123”，因此它們將具有50％/ 50％的比例寬度。 180px與寬度“123”相比，它將按比例分配列之間的寬度。 如果我們從180px更改為90px，則比例會發生變化。 如果我們在右欄中從“123”更改為“12345”，則比例也會發生變化。

Answer 3

首先，不再支持width=""作為表標記屬性。 用CSS設置寬度。

至於你的大小調整問題，表大小調整與div大小不同。 這個問題的解決方案應該適合你：

表格第一列的固定寬度