CSS 自适应简单 Table

前言

众所周知，Table 由于其不方便换行的固有特性，且常常存在一行大量文本，正在逐渐与现代的自适应布局脱节。Grid 与 Flex 的效果固然不错，但有没有什么方法能将简单的 Table 进行简单的自适应并保持代码（例如 Wikitext）的基本格式以对代码力较差的大众也能看懂？

答案自然是有的，当你去网上搜索便能发现一些使用 attr() 的 CSS 转换，亦或者是用 JS 进行更复杂的转换。

而本篇介绍的便是 attr() 的进阶方法，毕竟每个元素都要设置 data- 值也太烦了……

实例

@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) "：";
	}
}

简介

此方法仅适用于十分基础的表格，但我想这大概也挺有用的。可惜其中主要的参数 MediaWiki 的纯 CSS / 已过滤的 CSS 并不支持。

思路是将表格转换为有序列表，通过 symbols 统一指定标题。data-th 值可用于特别指定一个标题，虽然感觉没什么用。

这里不对代码进行详细解释，请自行查阅例如 MDN 等相关文档，如果还是看不懂，或许你不该在这里。