Question

我今天想知道HTML表中的多余空间（超出内容请求的空间）是如何在列之间拆分的。令人惊讶的是，即使经过大量的谷歌搜索，我也找不到答案。所以我很快就嘲笑了最简单的页面并进行了测试。

<html><head>
    <style type="text/css">
        td, div{
            border: 1px solid black;   
        }
    </style>
</head><body>
    <table width=500>
        <tr>
            <td><div style="width: 200px;">Big td</div></td>
            <td><div style="width: 100px;">Small td</div></td>
        </tr>
    </table>
</body></html>

结果（在谷歌浏览器中）看起来像这样： how extra space is allocated in a table

基于此，浏览器似乎按比例分配额外的空间。为列提供与其最初请求的空间量成比例的额外空间的百分比。考虑到这一点，这篇文章有三个目的：

记录此行为以供其他人查找的地方
我想知道，这适用于所有浏览器吗？（试试你的）
这是真正的问题，有没有办法使用CSS来改变这种行为？特别是让浏览器在列之间平均分配额外的宽度？

Answer 1

您可以通过应用flexbox CSS规则来更改水平空间分配。查看http://the-echoplex.net/flexyboxes/并使用＆＃34; flex＆＃34;中的第一个数字。属性。这个数字决定了什么元素得到了多少空间和多少。

如何将表中的额外宽度划分为列？

1 个答案: