Posts CSS题目系列(1) - 可滚动的Table
Post
Cancel

CSS题目系列(1) - 可滚动的Table

描述

在开发中,有这样一个需求,Table的表头不动,表身可以滚动,效果请点击以下链接查看:

https://gd4ark.github.io/blog-demos/2018-11-25/01.html

正文

假设我们有一个这样结构的表格:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table>
    <thead>
        <tr>
            <th>Position</th>
            <th>Name</th>
            <th>Score</th>
            <th>Time</th>
        </tr>
    </thead>
    <tbody>
        <!-- 这里为了方便展示 只显示一行 -->
        <tr>
            <td>0</td>
            <td>张三</td>
            <td>15</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

设置表身样式:

1
2
3
4
5
table tbody {
	display: block;
	height: 200px;
	overflow-y: auto;
}

这时候,表身已经实现了滚动,但是有个问题,td缩在了一堆,如下:

加上这个就好了:

1
2
3
4
5
6
table thead,
tbody tr {
	display: table;
	table-layout: fixed; /* 使用表格固定算法 必须配合上面一起使用 */
	width: 100%;
}

完整代码:https://github.com/gd4Ark/blog-demos/blob/master/2018-11-25/01.html

后记

刚刚开始写文章,很多地方写的不够好,望谅解,我会慢慢改进的。

This post is licensed under CC BY 4.0 by the author.

解决 Windows 中设置静态 IP 却始终变回 DHCP 获取问题

CSS题目系列(2) - 实现一个固定比例盒子

Loading comments from Disqus ...