Fixed table layout with auto width

Question

According to spec, Fixed table layout won't work with width set to auto:

17.5.2.1 Fixed table layout

With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.

The table's width may be specified explicitly with the 'width' property. A value of 'auto' (for both 'display: table' and 'display: inline-table') means use the automatic table layout algorithm. However, if the table is a block-level table ('display: table') in normal flow, a UA may (but does not have to) …

Is there any hack to make it work anyway (using pure CSS)?

What I have: table-layout: fixed takes no effect with width: auto:

table{
  /* those two won't work togheter */
  table-layout: fixed;
  width: auto;
}

td{
  /* pure visual purpose */
  border: 1px solid black;
  padding: 10px;
}

<table>
	<tr>
		<td>Mid long text</td>
		<td>The very longest text</td>
		<td>Short</td>
	</tr>
</table>

What I want to get: All table cells's width is set to the widest one:

// width of widest table cell (in px)
var max = 0;

// get width of widest table cell (in px)
$('table td').each(function(){
	max = Math.max(max, $(this).width());
});

// set width of all cells to the width of widest one
$('table td').each(function(){
	$(this).css('width', max +'px');
});

table{
  /* those two won't work togheter */
  table-layout: fixed;
  width: auto;
}

td{
  /* pure visual purpose */
  border: 1px solid black;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
	<tr>
		<td>Mid long text</td>
		<td>The very longest text</td>
		<td>Short</td>
	</tr>
</table>

Johannes Johannes · Accepted Answer · 2016-09-15T10:07:19

Just assign a percentage width to the td - you don't need any CSS rule for table itself then (see snippet)

.container {
  background-color: #0fa;
  }
table {
  background-color: #fa0;
  }
td{
  border: 1px solid black;
  padding: 10px;
  width: 33%;
}

<div class="container">
<table>
	<tr>
		<td>Mid long text</td>
		<td>The very longest text</td>
		<td>Short</td>
	</tr>
</table>
  </div>

Fixed table layout with auto width

1 Answers