HTML表格列宽：固定和可变宽度的结合

Question

HTML表格列宽：固定和可变宽度的结合

9

我已经制作了这样的一个表格：

<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列只占用所需的空间，而space列则会扩展以填充表格的其余部分？

- whotemp

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ed Staub · Accepted Answer

我不是CSS专家，但似乎没有办法做到这一点是不对的。这个方法在Firefox和IE7中似乎有效。我没有检查其他浏览器。

第一个自适应宽度的<col>（使用CSS）被设置为0，所以它会根据内容缩小。

第二个空间宽度的<col>（使用CSS）被设置为比表格更宽。

最后两列固定宽度的<col>的宽度不在<col>上。相反，它们被设置在<td>样式上。这将强制设置列宽度。

<!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>