固定表格布局，但一列調整為內容？ （僅HTML和CSS）

Question

在下面的代碼段中，是否有可能使標簽列調整為其內容？ 當前，它根本不接收寬度：(。

對於這個問題，我只對使用HTML表格和CSS的可能解決方案感興趣，而沒有Javascript庫的幫助。

 table { width: 100%; table-layout: fixed; border-collapse: collapse; } td { border: 1px solid black; margin: 0px; padding: 0px; } input[type='text'] { width: 100%; box-sizing: border-box; } 

 <table> <tr> <td style="width: 100%;"></td> <td style="width: auto;">Label:</td> <td style="width: 5px;"></td> <td style="width: 200px;"><input type='text' /></td> <td style="width: 100%;"></td> </tr> </table> 

上下文：我習慣於對桌面應用程序網格布局進行編程，該布局由不斷增長的列，固定寬度的列和調整為內容的首選大小的列組成。 通常，還可以為增長中的色譜柱提供調整大小的砝碼。

Answer 1

對於布局，我建議使用真棒的CSS新功能： CSS網格 。 這樣，您就可以更好地控制布局，從語義上講正確，優雅且易於維護。 使用css網格，您實際上可以做很多事情，盡管使用不同的單位（fr代替％）。 如果表的內容不是純數據，請不要使用。 而且，如果您確實使用表格，我建議不要過多地修改列的寬度，以使其更易於響應。

CSS網格是一個相當新的功能，它實際上是進行布局的第一種合法方法。 它可能會與較舊的常見布局方式（例如bootstrap grid）相混淆。 這些不一樣，也很不一樣！ 選擇任何您更喜歡的網格處理方式，但絕對不要在布局中使用表格。 :)

Answer 2

好吧，只要確保所有列寬度的總和不超過100％。 width: auto設置剩余空間的寬度，但是當其他列的寬度> 100％時，則什么也沒有。

嘗試這個：

<table class="t">
  <tr>
    <td style="width: 40%;">a</td>
    <td style="width: auto;">b</td>
    <td style="width: 50px;">c</td>
    <td style="width: 40%;">d</td>
  </tr>
</table>

如果表格寬度為1000像素，則寬度的1％為10像素。 在這種情況下， 40%占用400px， 50px占用... 50px，而auto占用剩余的空間，即(1000px - 400px - 400px - 50px) == 150px 。

如果您有2列width: auto列，那么這些列的寬度將為75px，因為150px（剩余空間）/ 2（列數的width: auto ）== 75px。

如果我有4個寬度為50％，50％，50px，自動的列，那么無論表格有多寬，剩下的空間都為-50px （這就是使width: auto看起來像width: 0 ）的原因。

確保您的“剩余空間”大於0。一列的width: 100%並且您不在其中。

Answer 3

看起來CSS網格完全符合我的要求：

 .container { width: 100%; display: grid; grid-template-columns: 1fr auto 5px 200px 1fr; border: 1px solid black; border-width: 1px 0 0 1px; // top + left } .container > DIV { border: 1px solid black; border-width: 0 1px 1px 0; // right + bottom } input[type='text'] { width: 100%; } 

 <div class="container"> <div></div> <div>Label:</div> <div></div> <div><input type='text' /></div> <div></div> </div>