HTML table with auto-fit for some columns, fixed width for others
- by sangil
I'm trying to create a table adhering to the following requirements:
The table width must be defined as 0 - the browser should calculate the width according to the column widths (this is to accommodate a column-resize plugin).
Some columns may receive a fixed width (e.g. 50px);
Columns that do not receive a fixed width, must auto-fit to the content.
I have created a small example to illustrate the problem - as you can see column 3 stays at width 0 and so is not visible.
HTML
<table>
<tr>
<td class="cell header" id="header1">Header 1</td>
<td class="cell header" id="header2">Header 2</td>
<td class="cell header" id="header3">Header 3</td>
</tr>
<tr>
<td class="cell">Cell 1</td>
<td class="cell">Cell 2</td>
<td class="cell">Very looooong content</td>
</tr>
</table>
CSS
table {
table-layout: fixed;
width: 100%;
border: 1px solid #696969;
}
.cell {
color: #898989;
border: 1px solid #888;
padding: 2px;
overflow: hidden;
}
.header {
background-color: lightsteelblue;
color: black;
}
#header1, #header2 {
width: 50px;
}
Is this even possible? Any help would be appreciated...
