神奇的table-layout属性

该文章发布于 ,归类于 HTML/CSS 0 条评论

html表格table中有一个很神奇的属性table-layout,当你不指定的时候,它采用的是默认的table-layout:auto方式显示。

为什么说这个属性奇怪呢?举几个栗子。

首先我设置一下页面的基本css样式

html {
    background-color: #eee;
}

body {
    width: 400px;
    margin: 0 auto;
    background-color: #fff;
}

table {
    border: 1px solid #78bc6f;
    width: 100%;
}

table td {
    border: 1px solid #ccc;
}

当表格的有一列内容很长,另一列内容很短时,肯定是长的那一列宽度会比较宽,这个应该看起来还算合理。

<table class="table1">
    <tr>
        <td>内容1内容1内容1内容1内容</td>
        <td>内容2而且我还很长内容2而且我还很长内容2而且我还很长内容2而且我还很长内容2而且我还很长</td>
    </tr>
</table>

它显示成这样

你可以查看这里的代码

See the Pen 表格1 by Leevare (@leevare) on CodePen.

但是,如果我设置了td的宽度的话,而且还设置的是一个很大的宽度,如下代码

<style>
table.table2 td:first-child {
    width: 2000px;
}

table.table2 td:last-child {
    width: 1000px;
}
</style>
<table class="table2">
    <tr>
        <td>内容1我被设置了一个很大的宽度内容1我被设置了一个很大的宽度内容1我被设置了一个很大的宽度</td>
        <td>内容2我被设置了一个很大的宽度内容2我被设置了一个很大的宽度内容2我被设置了一个很大的宽度</td>
    </tr>
</table>

它们却并没有按照我设置的宽度来显示,而是根据宽度自动换算为大小比例显示在body里。

你可以查看这里的代码

See the Pen 表格2 by Leevare (@leevare) on CodePen.

另外一种情况,当有一列中包含图片,而且图片很长,有可能超出列,如果我将td设置为超出部分隐藏会发生什么呢?

<style>
table.table3 td {
    overflow: hidden;
}
</style>
<table class="table3">
    <tr>
        <td>内容1内容1内容1内容1内容1</td>
        <td><img src="https://www.leevii.com/wp-content/uploads/2018/08/20180817093351.jpg" title="我很长,而且被设置了超出隐藏"></td>
    </tr>
</table>

结果设置的超出隐藏根本没有生效,图片依旧后超出表格列。

你可以查看这里的代码

See the Pen yqddQe by Leevare (@leevare) on CodePen.

再一种情况,如果表格列中包含一个很长的不可折断的字符串,比如说一个非常长的单词等,那么我设置让其超出表格列显示省略号,会怎样呢?

<style>
table.table4 td {
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>
<table class="table4">
    <tr>
        <td>
            我是一个不能折行的字符串,而且我还被设置了超出显示省略号,bzxcaskdnwqienqdabzxcaskdnwqienqdabzxcaskdnwqienqdabzxcaskdnwqienqdabzxcaskdnwqienqda
        </td>
        <td>我是另一列</td>
    </tr>
</table>

结果发现它并没有显示省略号,依旧不依不挠的超出列,将我做过的设置视而不见。

你说气不气,完全不听从你的意愿,这个table-layout默认的显示方式感觉有点奇怪。

你可以查看这里的代码

See the Pen vaqqQz by Leevare (@leevare) on CodePen.

好了,开始献上终极武器table-layout:fixed,大喊一声:“众神归位”,再来看看会发生些什么。

table {
    border: 1px solid #78bc6f;
    width: 100%;
    table-layout: fixed;
}

结果发现全部都按照上面的设置样式来显示了。

你可以查看这里的代码

See the Pen 表格5 by Leevare (@leevare) on CodePen.

table-layout:fixed会在表格的表头宽度设置后,渲染效果就确定了,那么,如果你想显示固定宽度的表格时,搭配table-layout:fixed属性会更好哦。

相关文章