文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML表格列宽:组合固定宽度和可变宽度

问HTML表格列宽:组合固定宽度和可变宽度
EN

Stack Overflow用户

提问于 2011-11-19 08:37:52

回答 1查看 11.3K关注 0票数 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列则展开以填充表的其余部分？

css

html-table

width

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-11-21 09:29:46

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

第一个缩小到适合的宽度(使用CSS)设置为0宽度，因此它会缩小以适合内容。

第二个空间设置(使用CSS)的宽度大于表格的大小。

最后两个固定宽度%s的宽度不在。取而代之的是，它是由风格决定的。这将强制使用列宽。

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

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/8190909

复制

相似问题

问HTML表格列宽:组合固定宽度和可变宽度
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML表格列宽:组合固定宽度和可变宽度EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML表格列宽:组合固定宽度和可变宽度
EN