Fixed table layout with auto width - css

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>

Answer 1

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>