首先认识一下表格的table-layout属性

tableLayout 属性用来显示表格单元格、行、列的算法规则。

tableLayout有如下三个值:auto  fixed  inherit

描述
auto默认。列(td,th)宽度由单元格内容设定。

(1)  给td指定的width不一定生效,tdwidth会自动调整

(2) text-overflow: ellipsis也会失效,同样,img会撑大td

fixed

列宽由表格宽度和列宽度设定。

(1)  给td指定的width会生效

(2) text-overflow: ellipsis会生效

inherit规定应该从父元素继承 table-layout 属性的值。

注意:

  • tdtext-overflow : ellipsisoverflow : hidden都会起作用,但是这里也有几个地方要注意:
  • text-overflow : ellipsis生效的前提是
    • overflow不为visible,最好是类似hidden的值
    • 需要指定tablewidth
  • 如果td的宽度加起来超过tablewidth,即使给table加上overflow:hiddentd也不会被隐藏。

表格table中thead固定,tbody超出高度出现滚动条,css可进行如下设置

table tbody {
    display: block;
    height: 195px;
    overflow-y: scroll;
}

table thead,
tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;/*重要  表格固定算法*/
}

table thead {/*留出滚动条的位置*/
    width: calc(100% - 1em)
}

table thead th {
    background: #ccc;
}

例子如下

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>表格table种tbody超出高度加滚动条</title>
    <style>
        table tbody {
            display: block;
            height: 195px;
            overflow-y: scroll;
        }

        table thead,
        tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

        table thead {
            width: calc(100% - 1em)
        }

        table thead th {
            background: #ccc;
        }
    </style>
</head>

<body>
    <table width="80%" border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>出生年月</th>
                <th>手机号码</th>
                <th>单位</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三封</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴与四十大盗</td>
            </tr>
            <tr>
                <td>张小三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>腾讯科技</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>浏阳河就业</td>
            </tr>
            <tr>
                <td>张三疯子</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张大三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三五</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张刘三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐