固定表格布局，但一列调整为内容？ （仅HTML和CSS）

Question

In the snippet below, is it possible to get label column to adjust to its content? Currently it receives no width at all :(.

For this question I am only interested in possible solutions that use HTML tables and CSS, without the help of Javascript libraries.

 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> 

Context: I am used to program desktop application grid layouts that consist of growing columns, fixed-width columns and columns that adjust to the preferred size of the content. Usually it is also possible to provide resize weights for the growing columns.

Answer 1

For layout I would suggest using awesome new css feature: css grids . This way you have way more control over your layout, it's semantically correct, elegant and easier to maintain. With css grids you can actually do what you want so much, though using different unit (fr instead of %). Don't use table if it's content is not pure data. And if you do use table, I would suggest not messing with columns width too much to make it easier to be responsive.

Css grids are quite new feature and it's actually the first legit way of doing layout. It may be confused with older, common way of doing layout, like bootstrap grid . These are not the same and quite different! Pick any way of doing grids you like more, but definitely don't use tables for the layout. :)

Answer 2

Well, just make sure that sum of all columns width is no more than 100%. width: auto sets width of whatever space is left, but there's nothing left when other columns takes >100% of width.

Try this:

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

If table width is 1000px, then 1% of width is 10px. In that case 40% takes 400px, 50px takes... 50px, and auto takes what's left, which is (1000px - 400px - 400px - 50px) == 150px .

If you had 2 columns with width: auto , then these columns width would be 75px, because 150px (space left) / 2 (number of columns width: auto ) == 75px.

If I had 4 columns with widths: 50%, 50%, 50px, auto, then no matter how wide table is, the space left is kind of -50px (which is what makes width: auto look like width: 0 ).

Make sure your "space left" is more than 0. One column with width: 100% and you're out of it.

Answer 3

Looks like CSS grid does exactly what I was looking for:

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