Benio Benio - 2 months ago 9
CSS Question

Fixed table layout with auto width

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

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>

Comments