第四章 · 4.3 节

列表与表格样式

列表（<ul>/<ol>）与表格（<table>）是两类自带默认样式的语义化标签，本节介绍如何驯服它们默认的间距、标记与边框，做出干净的自定义样式。

list-style 系列

属性	常用取值	说明
list-style-type	disc / decimal / none	标记的形状，none 常用于导航菜单去掉圆点
list-style-position	outside（默认）/ inside	inside 让标记参与文本排版，多行时随文本缩进
list-style-image	url(...)	用图片替代默认标记，现已较少使用，多用 ::marker 或伪元素替代

nav ul {
  list-style: none;
  margin: 0;
  padding: 0; /* ul 默认有 padding-left，用于给圆点/数字留位置，去掉标记后一并清零 */
}

::marker 伪元素专门用来样式化列表标记本身，比替换整个 list-style-image 更灵活——可以单独设置标记的颜色、字号，而不影响列表项文字。

li::marker {
  color: var(--accent2);
  font-weight: 700;
}

::marker 效果

更多伪元素的通用用法见 3.3 其他伪元素。

属性	作用对象	说明
border-collapse	table	collapse 合并相邻单元格边框为一条线，separate（默认）各自保留边框
border-spacing	table	仅在 separate 模式下生效，控制单元格间距
table-layout	table	fixed 让列宽由首行单元格决定，渲染更快，避免内容撑开列宽
caption-side	caption	控制表格标题在上方还是下方

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid var(--rule);
  padding: 8px 12px;
  text-align: left;
}

提示本教程页面里的所有表格（包括这一张）都使用了 border-collapse: collapse ——这是让表格看起来"干净"而非"每个格子都是一个独立盒子"的关键一行。

用 :nth-child() 结构性伪类给隔行变色，是提升宽表格可读性的经典手法（结构性伪类的完整介绍见 2.4 伪类选择器）：

tbody tr:nth-child(even) {
  background: var(--desk);
}

窄屏下表格容易横向溢出，最简单的应对方式是给外层容器设置横向滚动，而不强行压缩列宽：

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

去掉 list-style 后忘记清零默认的 padding-left，导致列表看起来仍有一段莫名的缩进。
表格不设置 table-layout: fixed 时，某个单元格内容过长会撑开整列甚至整个表格，破坏预期布局。
混用 border-collapse: collapse 与单元格的 border-radius——合并边框模式下圆角可能不生效，需要 separate 模式配合 border-spacing: 0 实现圆角表格。