HTML表列宽：组合固定宽度和可变宽度 [英] HTML table column widths: combining fixed and variable widths
问题描述
我创建了一个表格：
<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>
我如何做CSS，使b和c列有固定宽度，a列
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?
推荐答案
我要使用空格来填充表格的其余部分没有CSS的古茹，但它似乎是没有正确的，没有办法这样做。这似乎在Firefox和IE7中工作。我尚未检查其他浏览器。
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.
第一个缩小匹配< col> （使用CSS）设置为0宽度，因此它缩小到适合内容。
The first shrink-to-fit <col> is set (using CSS) to 0 width, so it shrinks to fit the content.
第二个空格< col>
The second space <col> is set (using CSS) to a width larger than will fit in the table.
最后两个固定宽度< col>的宽度不在< col> ;.相反，它设置在< td>样式。这会强制列宽。
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>
这篇关于HTML表列宽：组合固定宽度和可变宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
