Obsidian 学习笔记

Appearance

表格样式美化 ​

Obsidian 默认的表格样式比较朴素。通过 CSS 可以添加斑马纹、表头高亮、悬停效果。

基础美化 ​

css
/* 表格容器 */
.markdown-preview-view table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.95em;
}

/* 表头 */
.markdown-preview-view th {
  background-color: var(--background-secondary);
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid var(--interactive-accent);
}

/* 表格行 */
.markdown-preview-view td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--background-modifier-border);
}

斑马纹 ​

css
/* 偶数行背景 */
.markdown-preview-view tr:nth-child(even) td {
  background-color: var(--background-secondary);
}

悬停高亮 ​

css
/* 行悬停 */
.markdown-preview-view tr:hover td {
  background-color: rgba(124, 58, 237, 0.05);
}

/* 过渡动画 */
.markdown-preview-view td {
  transition: background-color 0.15s ease;
}

圆角表格 ​

css
/* 圆角表格 */
.markdown-preview-view table {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--background-modifier-border);
}

/* 表头圆角 */
.markdown-preview-view th:first-child {
  border-top-left-radius: 8px;
}

.markdown-preview-view th:last-child {
  border-top-right-radius: 8px;
}

紧凑表格 ​

css
/* 紧凑模式 */
.markdown-preview-view table {
  font-size: 0.9em;
}

.markdown-preview-view th,
.markdown-preview-view td {
  padding: 6px 10px;
}

卡片式表格 ​

css
/* 卡片阴影 */
.markdown-preview-view table {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  border: none;
}

.markdown-preview-view th {
  border-bottom: 2px solid var(--interactive-accent);
}

.markdown-preview-view td {
  border-bottom: 1px solid var(--background-modifier-border);
}

列高亮 ​

css
/* 首列加粗 */
.markdown-preview-view td:first-child {
  font-weight: 500;
  color: var(--text-normal);
}

/* 末列强调色 */
.markdown-preview-view td:last-child {
  color: var(--interactive-accent);
}

相关内容 ​