【CSS】锁定表格的表头和首列，以显示大表格的滚动条

Linzeal · 2024 年1 月 3 日 04:13

检索关键字: CSS css snippets 锁定固定 sticky table 大表格表头表格首行表格首列表格第一行表格第一列滚动条

Markdown文件有时难免会有数据比较多的大表格，这时若锁定表格的表头或首列，就可拖动滚动条来查看表格数据。下面的CSS代码可用来锁定首列和表头，由于编辑模式尚有一些问题，当前分别拆分为编辑模式和阅读模式两个CSS，阅读模式CSS可正常使用。

编辑模式CSS尚有以下问题，希望高手们能完善，或者有更好的方案：

（严重的问题）在编辑模式下，拖动滚动条后，鼠标点击表头和首列之外的任意单元格进行编辑，无法进入编辑状态，而是会自动触发从锁定的表头或首列选取至当前编辑格的选择框。

阅读模式CSS代码：

/* ==== 锁定表头和首列-阅读模式 By Linzeal 2024/1/4 ==== */

/* 由于编辑模式尚有一些问题，当前分别拆分为编辑模式和阅读模式两个CSS */

/* == 锁定表头和首列共同的格式预处理 == */
.theme-dark
{
  --table-row-alt-background:#101010;  /*Obsidian官方CSS变量：交替的表隔行背景色，默认值为:var(--table-background)*/
  --table-row-background-hover: DimGray ;  /*Obsidian官方CSS变量：表行悬停背景色，默认值为:var(--table-background)*/
}

.theme-light
{
  --table-row-alt-background:WhiteSmoke;  /*Obsidian官方CSS变量：交替的表隔行背景色，默认值为:var(--table-background)*/
  --table-row-background-hover: LightYellow;  /*Obsidian官方CSS变量：表行悬停背景色，默认值为:var(--table-background)*/
}
table
{
  --table-white-space: nowrap;  /*Obsidian官方CSS变量：表格是否换行，默认值为:break-spaces*/
  --table-header-color:var(--text-on-accent);  /*Obsidian官方CSS变量：表头文本颜色，默认值为:var(--text-normal)*/
  --table-header-background: var(--color-accent);  /*Obsidian官方CSS变量：表头背景色，默认值为:var(--table-background)*/
  --table-header-background-hover: var(--table-header-background);  /*Obsidian官方CSS变量：表头悬停背景色，默认值为:inherit*/
  --table-row-alt-background-hover: var(--table-row-background-hover);  /*Obsidian官方CSS变量：交替的表隔行悬停背景色，默认值为:var(--table-background)*/
  --table-drag-handle-background: var(--background-primary);  /*Obsidian官方CSS变量：表行列拖拽图标背景色，默认值为:transparent*/
  --table-drag-handle-color: var(--table-drag-handle-background);  /*Obsidian官方CSS变量：表行列拖拽图标背景色，默认值为:var(--text-faint)*/
}

/* 表头背景色 */
:is(
table thead tr,
table thead tr > th:nth-child(1),
table thead .cm-active
){
  background-color:var(--table-header-background);
}

/* 表行背景色 */
:is(
table tbody tr,
table tbody tr > td:nth-child(1)
){
  background-color: var(--background-primary);
}

/* 表隔行背景色 */
:is(
table tbody tr:nth-child(odd),
table tbody tr:nth-child(odd) > td:nth-child(1)
){
  background-color:var(--table-row-alt-background);
}

/* 表行悬停高亮背景色 */
:is(
table tbody tr:hover,
table tbody tr:hover td:nth-child(1)
){
  background-color:var(--table-row-background-hover) !important;
}

/* 选中格悬停动画，喜欢的可以取消注释来使用 
:is(
table th:hover,
table td:hover
){
  transform: scale(1.05);
  transition: all 0.1s cubic-bezier(0.11, 0.33, 0.23, 0.33);
  border:2px solid var(--table-selection-border-color);
}*/

/* == 锁定表首列 == */

/* 锁定表首列格式预处理 */
/*.table-wrapper .table-editor div:has(> table) .markdown-source-view.mod-cm6 .cm-table-widget*/
:is(
.markdown-reading-view table
){
  /*max-width:100%; 表格显示的最大宽度。限定了宽度锁定表首列才有意义，否则表列就全部展开了*/
}


/* 锁定表头首格。z-index需比表头和表体首列的z-index更高 */
:is(
.markdown-reading-view table thead tr > th:nth-child(1)
){
  position: sticky !important;
  left: 0;
  top: 0;
  z-index: 9;
}

/* 锁定表体首列。z-index需比表头首格的z-index低 */
:is(
.markdown-reading-view table tbody tr > td:nth-child(1)
){
  position: sticky !important;
  left: 0;
  z-index: 7;
}

/* ==== 锁定表头 ==== */

/* 锁定表头。z-index需比表头首格的z-index低 */
:is(
.markdown-reading-view table thead tr 
){
  position: sticky !important;
  top: 0;
  z-index: 8;
}

/* 锁定表头格式预处理 */

:is(
.markdown-reading-view table
){
  max-height: 500px; /*表格显示的最大高度。限定了高度锁定表头才有意义，否则表行就全部展开了*/
  overflow-y:auto;
}

:is(
.markdown-reading-view table
){
  display:block;
}

/* 表同列悬停高亮背景色-感觉太花哨了，有需要的可以取消下方代码的注释来使用。若表格大于50列的要自己增加代码*/
/*
:is(
table:has(td:nth-child(1):hover) td:nth-child(1),
table:has(td:nth-child(2):hover) td:nth-child(2),
table:has(td:nth-child(3):hover) td:nth-child(3),
table:has(td:nth-child(4):hover) td:nth-child(4),
table:has(td:nth-child(5):hover) td:nth-child(5),
table:has(td:nth-child(6):hover) td:nth-child(6),
table:has(td:nth-child(7):hover) td:nth-child(7),
table:has(td:nth-child(8):hover) td:nth-child(8),
table:has(td:nth-child(9):hover) td:nth-child(9),
table:has(td:nth-child(10):hover) td:nth-child(10),
table:has(td:nth-child(11):hover) td:nth-child(11),
table:has(td:nth-child(12):hover) td:nth-child(12),
table:has(td:nth-child(13):hover) td:nth-child(13),
table:has(td:nth-child(14):hover) td:nth-child(14),
table:has(td:nth-child(15):hover) td:nth-child(15),
table:has(td:nth-child(16):hover) td:nth-child(16),
table:has(td:nth-child(17):hover) td:nth-child(17),
table:has(td:nth-child(18):hover) td:nth-child(18),
table:has(td:nth-child(19):hover) td:nth-child(19),
table:has(td:nth-child(20):hover) td:nth-child(20),
table:has(td:nth-child(21):hover) td:nth-child(21),
table:has(td:nth-child(22):hover) td:nth-child(22),
table:has(td:nth-child(23):hover) td:nth-child(23),
table:has(td:nth-child(24):hover) td:nth-child(24),
table:has(td:nth-child(25):hover) td:nth-child(25),
table:has(td:nth-child(26):hover) td:nth-child(26),
table:has(td:nth-child(27):hover) td:nth-child(27),
table:has(td:nth-child(28):hover) td:nth-child(28),
table:has(td:nth-child(29):hover) td:nth-child(29),
table:has(td:nth-child(30):hover) td:nth-child(30),
table:has(td:nth-child(31):hover) td:nth-child(31),
table:has(td:nth-child(32):hover) td:nth-child(32),
table:has(td:nth-child(33):hover) td:nth-child(33),
table:has(td:nth-child(34):hover) td:nth-child(34),
table:has(td:nth-child(35):hover) td:nth-child(35),
table:has(td:nth-child(36):hover) td:nth-child(36),
table:has(td:nth-child(37):hover) td:nth-child(37),
table:has(td:nth-child(38):hover) td:nth-child(38),
table:has(td:nth-child(39):hover) td:nth-child(39),
table:has(td:nth-child(40):hover) td:nth-child(40),
table:has(td:nth-child(41):hover) td:nth-child(41),
table:has(td:nth-child(42):hover) td:nth-child(42),
table:has(td:nth-child(43):hover) td:nth-child(43),
table:has(td:nth-child(44):hover) td:nth-child(44),
table:has(td:nth-child(45):hover) td:nth-child(45),
table:has(td:nth-child(46):hover) td:nth-child(46),
table:has(td:nth-child(47):hover) td:nth-child(47),
table:has(td:nth-child(48):hover) td:nth-child(48),
table:has(td:nth-child(49):hover) td:nth-child(49),
table:has(td:nth-child(50):hover) td:nth-child(50)
){
  background-color:var(--table-row-background-hover) !important;
}
*/

编辑模式CSS代码：

/* ==== 锁定表头和首列-编辑模式-尚有问题 By Linzeal 2024/1/4 ==== */

/* 由于编辑模式尚有一些问题，当前分别拆分为编辑模式和阅读模式两个CSS */
/* 编辑模式问题：在编辑模式下，拖动滚动条后，鼠标点击表头和首列之外的任意单元格进行编辑，无法进入编辑状态，而是会自动触发从锁定的表头或首列选取至当前编辑格的选择框。*/

/* == 锁定表头和首列共同的格式预处理 == */
.theme-dark
{
  --table-row-alt-background:#101010;  /*Obsidian官方CSS变量：交替的表隔行背景色，默认值为:var(--table-background)*/
  --table-row-background-hover: DimGray ;  /*Obsidian官方CSS变量：表行悬停背景色，默认值为:var(--table-background)*/
}

.theme-light
{
  --table-row-alt-background:WhiteSmoke;  /*Obsidian官方CSS变量：交替的表隔行背景色，默认值为:var(--table-background)*/
  --table-row-background-hover: LightYellow;  /*Obsidian官方CSS变量：表行悬停背景色，默认值为:var(--table-background)*/
}
table
{
  --table-white-space: nowrap;  /*Obsidian官方CSS变量：表格是否换行，默认值为:break-spaces*/
  --table-header-color:var(--text-on-accent);  /*Obsidian官方CSS变量：表头文本颜色，默认值为:var(--text-normal)*/
  --table-header-background: var(--color-accent);  /*Obsidian官方CSS变量：表头背景色，默认值为:var(--table-background)*/
  --table-header-background-hover: var(--table-header-background);  /*Obsidian官方CSS变量：表头悬停背景色，默认值为:inherit*/
  --table-row-alt-background-hover: var(--table-row-background-hover);  /*Obsidian官方CSS变量：交替的表隔行悬停背景色，默认值为:var(--table-background)*/
  --table-drag-handle-background: var(--background-primary);  /*Obsidian官方CSS变量：表行列拖拽图标背景色，默认值为:transparent*/
  --table-drag-handle-color: var(--table-drag-handle-background);  /*Obsidian官方CSS变量：表行列拖拽图标背景色，默认值为:var(--text-faint)*/
}

/* 表头背景色 */
:is(
table thead tr,
table thead tr > th:nth-child(1),
table thead .cm-active
){
  background-color:var(--table-header-background);
}

/* 表行背景色 */
:is(
table tbody tr,
table tbody tr > td:nth-child(1)
){
  background-color: var(--background-primary);
}

/* 表隔行背景色 */
:is(
table tbody tr:nth-child(odd),
table tbody tr:nth-child(odd) > td:nth-child(1)
){
  background-color:var(--table-row-alt-background);
}

/* 表行悬停高亮背景色 */
:is(
table tbody tr:hover,
table tbody tr:hover td:nth-child(1)
){
  background-color:var(--table-row-background-hover) !important;
}

/* 选中格悬停动画，喜欢的可以取消注释来使用 
:is(
table th:hover,
table td:hover
){
  transform: scale(1.05);
  transition: all 0.1s cubic-bezier(0.11, 0.33, 0.23, 0.33);
  border:2px solid var(--table-selection-border-color);
}*/

/* 编辑模式：表头上方及首列左侧的行列拖拽图标的处理 */
:is(
.table-col-drag-handle,
.table-row-drag-handle
){
  background-color:var(--background-primary) !important;
  color:var(--background-primary) !important;
  opacity:1;
  z-index: 9;
}

:is(
.table-col-drag-handle:hover,
.table-row-drag-handle:hover
){
  color:var(--text-faint) !important;
}
/* == 锁定表首列 == */

/* 锁定表首列格式预处理 */


/*.markdown-source-view.mod-cm6 .cm-embed-block,
.markdown-source-view.mod-cm6 .cm-table-widget,
.table-wrapper,
.table-editor,
div:has(> table)*/
:is(
.markdown-source-view.mod-cm6 .cm-table-widget
){
  /*max-width:100%; 表格显示的最大宽度。限定了宽度锁定表首列才有意义，否则表列就全部展开了*/
}

/* 锁定表头首格。z-index需比表头和表体首列的z-index更高 */
table thead tr > th:nth-child(1)
{
  position: sticky !important;
  left: 0;
  top: 0;
  z-index: 9;
}

/* 锁定表体首列。z-index需比表头首格的z-index低 */
table tbody tr > td:nth-child(1)
{
  position: sticky !important;
  left: 0;
  z-index: 7;
}

/* ==== 锁定表头 ==== */

/* 锁定表头。z-index需比表头首格的z-index低 */
table thead tr
{
  position: sticky !important;
  top: 0;
  z-index: 8;
}

/* 锁定表头格式预处理 */

:is(
.markdown-source-view.mod-cm6 .cm-table-widget
){
  max-height: 500px; /*表格显示的最大高度。限定了高度锁定表头才有意义，否则表行就全部展开了*/
  overflow-y:auto;
}


/* 表同列悬停高亮背景色-感觉太花哨了，有需要的可以取消下方代码的注释来使用。若表格大于50列的要自己增加代码*/
/*
:is(
table:has(td:nth-child(1):hover) td:nth-child(1),
table:has(td:nth-child(2):hover) td:nth-child(2),
table:has(td:nth-child(3):hover) td:nth-child(3),
table:has(td:nth-child(4):hover) td:nth-child(4),
table:has(td:nth-child(5):hover) td:nth-child(5),
table:has(td:nth-child(6):hover) td:nth-child(6),
table:has(td:nth-child(7):hover) td:nth-child(7),
table:has(td:nth-child(8):hover) td:nth-child(8),
table:has(td:nth-child(9):hover) td:nth-child(9),
table:has(td:nth-child(10):hover) td:nth-child(10),
table:has(td:nth-child(11):hover) td:nth-child(11),
table:has(td:nth-child(12):hover) td:nth-child(12),
table:has(td:nth-child(13):hover) td:nth-child(13),
table:has(td:nth-child(14):hover) td:nth-child(14),
table:has(td:nth-child(15):hover) td:nth-child(15),
table:has(td:nth-child(16):hover) td:nth-child(16),
table:has(td:nth-child(17):hover) td:nth-child(17),
table:has(td:nth-child(18):hover) td:nth-child(18),
table:has(td:nth-child(19):hover) td:nth-child(19),
table:has(td:nth-child(20):hover) td:nth-child(20),
table:has(td:nth-child(21):hover) td:nth-child(21),
table:has(td:nth-child(22):hover) td:nth-child(22),
table:has(td:nth-child(23):hover) td:nth-child(23),
table:has(td:nth-child(24):hover) td:nth-child(24),
table:has(td:nth-child(25):hover) td:nth-child(25),
table:has(td:nth-child(26):hover) td:nth-child(26),
table:has(td:nth-child(27):hover) td:nth-child(27),
table:has(td:nth-child(28):hover) td:nth-child(28),
table:has(td:nth-child(29):hover) td:nth-child(29),
table:has(td:nth-child(30):hover) td:nth-child(30),
table:has(td:nth-child(31):hover) td:nth-child(31),
table:has(td:nth-child(32):hover) td:nth-child(32),
table:has(td:nth-child(33):hover) td:nth-child(33),
table:has(td:nth-child(34):hover) td:nth-child(34),
table:has(td:nth-child(35):hover) td:nth-child(35),
table:has(td:nth-child(36):hover) td:nth-child(36),
table:has(td:nth-child(37):hover) td:nth-child(37),
table:has(td:nth-child(38):hover) td:nth-child(38),
table:has(td:nth-child(39):hover) td:nth-child(39),
table:has(td:nth-child(40):hover) td:nth-child(40),
table:has(td:nth-child(41):hover) td:nth-child(41),
table:has(td:nth-child(42):hover) td:nth-child(42),
table:has(td:nth-child(43):hover) td:nth-child(43),
table:has(td:nth-child(44):hover) td:nth-child(44),
table:has(td:nth-child(45):hover) td:nth-child(45),
table:has(td:nth-child(46):hover) td:nth-child(46),
table:has(td:nth-child(47):hover) td:nth-child(47),
table:has(td:nth-child(48):hover) td:nth-child(48),
table:has(td:nth-child(49):hover) td:nth-child(49),
table:has(td:nth-child(50):hover) td:nth-child(50)
){
  background-color:var(--table-row-background-hover) !important;
}
*/

yuiaa · 2024 年1 月 3 日 15:19

有没有办法让编辑单元格的时候，让单元格增加它的高度，而不是宽度？不用这个css是增加高度，而不是增加宽度的。

Linzeal · 2024 年2 月 26 日 11:58

官方更新到1.5.8版后，上面那个编辑模式下的问题已经消失了。因此，编辑模式和阅读模式下的CSS代码都可良好正常使用了。

alan7 · 2024 年3 月 4 日 18:40

感谢您的样式！已经用上了，非常好用。
不过，有个问题想要请教一下，用上这个样式后，表格在阅读模式下不是全宽显示，请问怎么能够全宽显示呀？