-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathFlex Table.html
187 lines (187 loc) · 5.55 KB
/
Flex Table.html
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light dark" />
<meta name="theme-color" content="hsl(0, 0%, 96%);" />
<meta
name="theme-color"
media="(prefers-color-scheme: dark)"
content="hsl(0, 0%, 8%);"
/>
<meta name="author" content="鬼影233" />
<meta
name="description"
content="众所周知，Table 由于其不方便换行的固有特性，且常常存在一行大量文本正在逐渐与现代的自适应布局脱节。Grid 与 Flex 的效果固然不错，但有没有什么方法能将简单的 Table 进行简单的自适应并保持代码（例如 Wikitext）基本格式以对代码力较差的大众也能看懂？"
/>
<meta
name="keywords"
content="Flex, Table, CSS, 自适应, 简单, 代码, symbols, counter-style"
/>
<meta property="og:title" content="CSS 自适应简单 Table" />
<meta property="og:locale" content="zh_CN" />
<meta
property="og:url"
content="https://gui-ying233.github.io/Nest/Flex%20Table"
/>
<meta property="og:site_name" content="鬼影的基地" />
<meta
property="og:description"
content="众所周知，Table 由于其不方便换行的固有特性，且常常存在一行大量文本正在逐渐与现代的自适应布局脱节。Grid 与 Flex 的效果固然不错，但有没有什么方法能将简单的 Table 进行简单的自适应并保持代码（例如 Wikitext）基本格式以对代码力较差的大众也能看懂？"
/>
<meta property="og:type" content="article" />
<meta property="article:author" content="鬼影233" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="CSS 自适应简单 Table" />
<link
rel="canonical"
href="https://gui-ying233.github.io/Nest/Flex%20Table"
/>
<link rel="icon" type="image/x-icon" href="src/asset/favicon.ico" />
<link rel="apple-touch-icon" href="src/asset/favicon.ico" />
<title>CSS 自适应简单 Table - 鬼影的基地</title>
<script async src="src/js/clarity.js"></script>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-ZMHY61ZCQE"
></script>
<script async src="src/js/gtag.js"></script>
<script
async
src="https://hm.baidu.com/hm.js?abdce5cc5a81bdfb51506edb4641e824"
></script>
<link rel="stylesheet" href="src/css/base.css" />
<script type="speculationrules">
{ "prerender": [{ "urls": ["."] }] }
</script>
</head>
<body>
<h1>CSS 自适应简单 Table</h1>
<h2>前言</h2>
<p>
众所周知，Table 由于其不方便换行的固有特性，<!--
-->且常常存在一行大量文本，正在逐渐与现代的自适应布局脱节。<!--
-->Grid 与 Flex 的效果固然不错，但有没有什么方法能将简单的 Table
进行简单的自适应并保持代码（例如
Wikitext）的基本格式以对代码力较差的大众也能看懂？
</p>
<p>
答案自然是有的，当你去网上搜索便能发现一些使用
<code>attr()</code> 的 CSS 转换，亦或者是用 JS 进行更复杂的转换。
</p>
<p>
而本篇介绍的便是
<code>attr()</code> 的进阶方法，毕竟每个元素都要设置
<code>data-</code> 值也太烦了……
</p>
<h2>实例</h2>
<pre data-lang="css">
@media (max-width: 576px) {
.flextable,
.flextable > tbody,
.flextable tr {
display: block;
}
.flextable th {
display: none;
}
.flextable tr {
margin-block: .5em;
}
.flextable td {
display: list-item;
text-align: right;
margin-left: 4em;
}
@counter-style flextable-114514 {
system: fixed;
suffix: "：";
symbols: "标题1" "标题2" "标题3";
}
.flextable#flextable-114514 {
list-style: flextable-114514;
}
.flextable td::marker {
font-weight: bolder;
}
.flextable td[data-th]::marker {
content: attr(data-th) "：";
}
}</pre
>
<style media="(max-width: 576px)">
.flextable,
.flextable > tbody,
.flextable tr {
display: block;
}
.flextable th {
display: none;
}
.flextable tr {
margin-block: 0.5em;
}
.flextable td {
display: list-item;
text-align: right;
margin-left: 4em;
}
@counter-style flextable-114514 {
system: fixed;
suffix: "：";
symbols: "标题1" "标题2" "标题3";
}
.flextable#flextable-114514 {
list-style: flextable-114514;
}
.flextable td::marker {
font-weight: bolder;
}
.flextable td[data-th]::marker {
content: attr(data-th) "：";
}
</style>
<table id="flextable-114514" class="flextable" style="margin: auto">
<tbody>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
<tr>
<td>内容4</td>
<td data-th="特殊0">内容5</td>
<td>内容6</td>
</tr>
<tr>
<td>内容7</td>
<td>内容8</td>
<td>内容9</td>
</tr>
</tbody>
</table>
<h2>简介</h2>
<p>
此方法仅适用于十分基础的表格，但我想这大概也挺有用的。可惜其中主要的参数
MediaWiki 的纯 CSS / 已过滤的 CSS 并不支持。
</p>
<p>
思路是将表格转换为有序列表，通过
<code>symbols</code> 统一指定标题。<code>data-th</code>
值可用于特别指定一个标题，虽然感觉没什么用。
</p>
<p>
这里不对代码进行详细解释，请自行查阅例如 MDN
等相关文档，如果还是看不懂，或许你不该在这里。
</p>
<footer>
<a href=".">鬼影的基地</a>
</footer>
</body>
</html>