Creating a table with fixed width first column, text-contracting second column, and equally splitting remaining space for the rest seems to be a challenge.
Check out this fiddle for my current attempt: http://jsfiddle.net/B8LnP/
Two key issues to observe:
- Aligning the columns of stacked tables to appear as part of a single table
- The struggle to divide the remaining space between columns 3 and 4 even after adjusting the width for the
.equalclass
Fiddle HTML
<table>
<tr>
<td class="fixed">fixed</td>
<td class="small">small_as_possible</td>
<td class="equal">split remaining</td>
<td class="equal">equally</td>
</tr>
</table>
<!-- another instance to ensure column alignment -->
<table>
<tr>
<td class="fixed">fixed</td>
<td class="small">small_as_possible</td>
<td class="equal">equally</td>
<td class="equal">split remaining</td>
</tr>
</table>
CSS
table { width: 95%; margin: 0 auto}
td {border: 1px solid}
.fixed {width: 200px}
.small {width: 1px}
.equal { /* seeking the right value here */ }