I've made a table as such:
<table style="width:1000px;">
<tr>
<td>aaa</td>
<td id="space"></td>
<td class="fixed-width">bbb</td>
<td class="fixed-width">ccc</td>
</tr>
</table>
How would I do the CSS so that the b and c columns have a fixed width, the a column only takes as much space as needed, and the space column to expand to fill the rest of the table?
I'm no CSS guru, but it just didn't seem right that there'd be no way to do this. This appears to work in Firefox and IE7. I have not checked other browsers.
The first shrink-to-fit <col> is set (using CSS) to 0 width, so it shrinks to fit the content.
The second space <col> is set (using CSS) to a width larger than will fit in the table.
The width of the last two fixed-width <col>s is not on the <col>. Instead, it's set on the <td> style. This forces the column width.
<!DOCTYPE html>
<html>
<head>
<title>cols</title>
<style type="text/css">
td.fixed-width {
width: 100px;
background-color:aqua
}
td.min-width {background-color:aqua}
td.space {border: thick blue solid}
</style>
</head>
<body style="width:1100px; font-family:sans-serif">
<table style="width:1000px;">
<col style="width:0"/>
<col style="width:1000px"/>
<col span="2" />
<tr>
<td class="min-width">aaa</td>
<td class="space"></td>
<td class="fixed-width">bbb</td>
<td class="fixed-width">ccc</td>
</tr>
<tr>
<td class="min-width">aaa asdfasdf asdfsad</td>
<td class="space"></td>
<td class="fixed-width">bbb fasdas</td>
<td class="fixed-width">ccc vdafgf asdf adfa a af</td>
</tr>
</table>
</body>
</html>
来源：https://stackoverflow.com/questions/8190909/html-table-column-widths-combining-fixed-and-variable-widths