使用 CSS 美化 HTML 表格

本文介绍一个使用 CSS 美化 html table 的示例。

需要达到的效果:

后续将使用 table 标签和 CSS 逐步实现原型图的效果。


先实现页面的 html 部分#

实现效果及源代码见:

See the Pen Table and pagination #1 by Marshal Wu (@marshalw) on CodePen.

其实 markdown 语法借助 hexo 的支持,完全可以像之前一样将代码嵌入到文档中。

但这样做,容易让示例的 css style 受到上下文 css 的影响。

另外就是这样做,文章会特别冗长。

CSS 对表头、表格和底部做初步的布局#

主要是:

  • 表头,通过 flexbox,初步横向布局
  • 表格部分没有做处理,后续再说
  • 底部,也是用 flexbox,做了初步的布局

See the Pen Table and pagination #2 by Marshal Wu (@marshalw) on CodePen.

对表格部分做布局处理#

主要是对 table 标记内的样式做了处理

  • 设置表格为固定布局,table-layout: fixed;,不应因为数据变化,而影响表的行宽,尤其是在翻页过程中,用户体验会很差
  • 设置表格边框合并,border-collapse: collapse;,即 cell 之间没有空隙
  • 设置 cell 如果文字过长
    • white-space: nowrap;,不折行
    • overflow: hidden;,文字溢出部分不显示
    • text-overflow: ellipsis;,文字过长显示省略号
  • 设置行的下划线,border-bottom: solid 1px #dddddd;
  • 设置鼠标在行上时背景色变化,background-color: #eee;
  • 其他细节调整,文字对齐

See the Pen Table and pagination #3 by Marshal Wu (@marshalw) on CodePen.

内联示例和源代码#

内联示例:

每页显示
任务 类型 工时 完成时间
完成快看新闻客户端的广告接入工作 新功能 18.5 2019-8-9
解决查询时截止日期不生效的问题 缺陷 2.5 2019-8-7

可以看到因为收到 hexo 样式的影响,比如 table 标签的 cell 宽度。

源代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<div id="table-1">
<div class="table-header">
<div class="set-page-size">
<span>每页显示</span>
<select>
<option selected="selected">10</option>
<option>20</option>
</select>
<span></span>
</div>
<div class="set-query-conditions">
<input placeholder="姓名" />
<input placeholder="起始日期" />
<input placeholder="截止日期" />
<button>查询</button>
</div>
</div>

<table class="simple-table">
<thead>
<tr>
<th class="task-name">任务</th>
<th class="task-type">类型</th>
<th class="number-cell">工时</th>
<th class="number-cell">完成时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="#">完成快看新闻客户端的广告接入工作</a>
</td>
<td>新功能</td>
<td class="number-cell">18.5</td>
<td class="number-cell">2019-8-9</td>
</tr>
<tr>
<td>
<a href="#">解决查询时截止日期不生效的问题</a>
</td>
<td>缺陷</td>
<td class="number-cell">2.5</td>
<td class="number-cell">2019-8-7</td>
</tr>
</tbody>
</table>

<div class="table-footer">
<div>总工时:10.5</div>
<div>
<button>上一页</button>
<button>下一页</button>
</div>
</div>
</div>

<style>
#table-1 {
background-color: #ffffcc;
padding: 1rem;

display: flex;
flex-direction: column;
max-width: 800px;
}

#table-1 .table-header {
flex: 0 0 40px;

display: flex;
justify-content: space-between;
align-items: center;

font-size: 0.85rem;
}

#table-1 .table-footer {
flex: 0 0 40px;

display: flex;
justify-content: space-between;
align-items: center;

font-size: 0.85rem;
padding-top: 10px;
}

/* table 样式 */

table.simple-table {
flex: 1;
border-collapse: collapse;
table-layout: fixed;
}

table.simple-table .number-cell {
text-align: right;
padding-right: 10px;
}

table.simple-table td,
table.simple-table th {
padding: 0 0 0 10px;
height: 35px;
font-size: 0.8rem;
border-bottom: solid 1px #dddddd;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

table.simple-table th {
height: 40px;
text-align: left;
font-size: 0.85rem;
}

table.simple-table .task-name {
min-width: 450px;
}

table.simple-table .task-type {
max-width: 4rem;
width: 4rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

table.simple-table tbody tr:hover {
background-color: #eee;
}
</style>