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

【问题标题】：HTML table column widths: combining fixed and variable widthsHTML表格列宽：结合固定和可变宽度
【发布时间】：2012-01-01 17:14:04
【问题描述】：

我已经做了一个这样的表：

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

【问题讨论】：

标签： html css html-table width

【解决方案1】：

我不是 CSS 专家，但似乎没有办法做到这一点。这似乎适用于 Firefox 和 IE7。我没有检查其他浏览器。

第一个收缩以适应

设置（使用 CSS）为 0 宽度，因此它会收缩以适应内容。

第二个空格

设置为（使用 CSS）宽度大于表格的宽度。

最后两个定宽

的宽度不在上。相反，它设置在样式上。这会强制列宽。

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

【讨论】：

@whotemp - 不客气。我仔细阅读了 CSS 2.1 规范，看看是否能找到任何需要这种行为的东西，但结果却是空的。我认为的意思是，如果表格中的水平空间不足，则优先考虑为列中的单元格提供它们单独的内容声称需要，而不是提供宽度。