HTML Table - Both fixed and multiple variable column widths
You could set the table-layout: fixed
for the table
element, then simply set width
attribute on relevant <td>
or <th>
elements:
table {
table-layout: fixed;
}
JSFiddle Demo.
From the MDN:
The
table-layout
CSS property defines the algorithm to be used to layout the table cells, rows, and columns.
Values:
fixed:
Table and column widths are set by the widths oftable
andcol
elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.
to fixed width in a table, you need the table-layout
propertie set to fixed;
Since you mix % and px , it will not be coherent .
You may set only the px width and eventually a small value of % and let other column to use width left avalaible. example : http://jsfiddle.net/M4Et8/2/
<table style='table-layout:fixed;width:100%' border='1'>
<tr>
<th style='width: 20%;'>Column1</th>
<th style='width: 100px;'>Column2</th>
<th >Column3</th>
<th style='width: 200px;'>Column4</th>
<th >Column5</th>
</tr>
</table>