《CSS成长之路》007-CSS定义数据格式

使用 CSS 定制表格

通常情况下, 我们会使用如下代码来制作表格

...
<table border="1">
    <thead>
        <tr>
            <td>编号</td>
            <td>标题</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>HTML</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>2</td>
            <td>CSS</td>
        </tr>
    </tfoot>
</table>
...

使用 emmet 插件(vscode 内置), 可以加快 HTML 代码的书写速度

其实我们也可以使用 CSS 来使得普通的标签也有表格的效果
HTML 代码如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <article class="table">
            <section>
                <ul>
                    <li>编号</li>
                    <li>标题</li>
                </ul>
            </section>
            <section>
                <ul>
                    <li>1</li>
                    <li>HTML</li>
                </ul>
            </section>
            <section>
                <ul>
                    <li>2</li>
                    <li>CSS</li>
                </ul>
            </section>
        </article>
    </body>
</html>

同样可以使用 emmet 插件来加快速度

CSS 代码如下

.table {
    display: table;
}

.table section:nth-of-type(1) {
    display: table-header-group;
    background-color: #555;
    color: white;
}
.table section:nth-of-type(2) {
    display: table-row-group;
}

.table section:nth-of-type(3) {
    display: table-footer-group;
    background-color: #f3f3f3;
}
.table section ul {
    display: table-row;
}
.table section li {
    display: table-cell;
    border: solid 1px #ddd;
    padding: 10px;
}

首先我们需要把各个标签的 display 设置好

为单元格设置边框和内边距

设置背景色, 修改字体颜色

为表格设置背景图片

可以设置背景图片, 效果如下

.table {
    display: table;
    background: url("1.png");
    background-size: 100% 100%;
}

.table section:nth-of-type(1) {
    display: table-header-group;
}
.table section:nth-of-type(2) {
    display: table-row-group;
}
.table section:nth-of-type(3) {
    display: table-footer-group;
}

.table section ul {
    display: table-row;
}

.table section ul li {
    display: table-cell;
    border: 1px solid #ddd;
    padding: 10px;
}

需要给.table设置背景图片, 还需要把其他的background-color去掉

设置表格当前行高亮

效果如下

原始的 HTML 代码如下

...
<table border="1">
    <thead>
        <tr>
            <td>编号</td>
            <td>标题</td>
            <td>内容</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>HTML</td>
            <td>超文本标记语言</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>2</td>
            <td>CSS</td>
            <td>层叠样式表</td>
        </tr>
    </tfoot>
</table>
...

首先我们需要作出这种效果...

从图上看出, 单元格是没有左右边框的, 只有上下边框
我们先清除所有的边框, 然后给单元格添加上下边框

我们发现, 上下边框有重复, 左右单元格的边框连接不上
我们可以使用``来合并单元格的边框
所谓合并, 重复的会消除, 断开的会连上

通过设置内边距, 我们把单元格撑开一点

给单元行悬浮添加背景色

把鼠标变成小手

cursor: pointer;

完整的 CSS 代码

table,
td {
    border: none;
    border-collapse: collapse;
}
table td {
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    padding: 10px;
}
table tr:hover {
    background-color: #ddd;
    cursor: pointer;
}

定义列表符号

我们知道, 无序列表默认左边会有小黑圈

如果我们想去掉, 可以使用如下代码

li {
    list-style-type: none;
}

我们也可以使用图标, 自定义列表符号
代码如下

li {
    list-style-image: url("arrow.png");
}

实现自定义列表符号的另一种方式

通常我们想在列表下面加下划线, 但这个时候, 是不包括符号的

我们可以换一种列表符号的实现方式

我们可以通过背景图实现我们想要的效果
首先去除默认的列表圆点

然后设置背景图片, 记得去掉重复

设置背景图片的位置
background-position中, 如果你仅规定了一个值，另一个值将是 50%。

设置文字缩进
可以使用text-indent, 来设置文字的缩进, 给列表符号腾出空间

完整的 CSS 代码

li {
    border-bottom: 1px solid #ddd;
    padding: 10px;
    list-style: none;
    background-image: url("arrow.png");
    background-repeat: no-repeat;
    background-position: 0px;
    text-indent: 15px;
}

《CSS成长之路》007-CSS定义数据格式

使用 CSS 定制表格

为表格设置背景图片

设置表格当前行高亮

定义列表符号

实现自定义列表符号的另一种方式

快速跳转