新版表格美化片段 -- 类似Typora

经验分享
21

优化了一下，现在兼容了没有表头的表格，以及某些插件：

/********************/
/* 表格编辑行号变窄 */
/********************/

.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper table div.cm-gutters {
	margin-inline-end: 0 !important;
}

/****************/
/* 表格垂直居中 */
/****************/

.markdown-rendered table td {
	vertical-align: middle !important;
}

/******************/
/* 表格内自动折行 */
/******************/

:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper .cm-active, .markdown-rendered table) {
	word-break: break-all;
}

/**********************/
/* 仿 Typora 表格样式 */
/**********************/

body.theme-dark {
	/* 表格圆角大小 */
	--table-radius: var(--size-2-3);
	/* 表格按钮颜色 */
	--table-btn-color: #fff;
	/* 表格按钮背景色 */
	--table-btn-bg: #292929;
	/* 表格头背景色 */
	--table-header-bg: #242424;
	/* 表格隔行背景色 */
	--table-alt-line-bg: #242424;
	/* 动画时间 */
	--animation: 200ms var(--anim-motion-smooth);
}

body.theme-light {
	/* 表格圆角大小 */
	--table-radius: var(--size-2-3);
	/* 表格按钮颜色 */
	--table-btn-color: #fff;
	/* 表格按钮背景色 */
	--table-btn-bg: #aed7ff;
	/* 表格头背景色 */
	--table-header-bg: #f4f4f4;
	/* 表格隔行背景色 */
	--table-alt-line-bg: #f4f4f4;
	/* 动画时间 */
	--animation: 200ms var(--anim-motion-smooth);
}

/* 合并表格单元格边框 */
.ab-note table.ab-table,
.markdown-rendered table {
	border-collapse: initial;
	border-spacing: 0;
}

:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) {
	--table-white-space: break-all;
	width: 100%;
}

:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) .table-editor {
	width: 100%;
}

:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) .table-col-btn {
	border-top-right-radius: var(--table-radius);
	border-bottom-right-radius: var(--table-radius);
	color: var(--table-btn-color);
}

:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) .table-row-btn {
	border-bottom-left-radius: var(--table-radius);
	border-bottom-right-radius: var(--table-radius);
	color: var(--table-btn-color);
}

:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) :is(.table-col-btn, .table-row-btn, .table-col-drag-handle:hover, .table-row-drag-handle:hover) {
	transition: var(--animation);
	background-color: var(--table-btn-bg);
	--table-drag-handle-color: var(--table-btn-color);
}

/* TODO */
.markdown-rendered table:not(:has(thead)) tr:first-of-type {
	background-color: var(--table-btn-bg);
}

:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) :is(tr:hover .table-row-drag-handle, th:hover .table-col-drag-handle) {
	opacity: 1;
}

:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) th:first-child:not(:has(:is(.table-row-drag-handle, .table-col-drag-handle):hover)),
.markdown-rendered table:not(:has(thead)) tr:first-child td:first-child:not(:has(:is(.table-row-drag-handle, .table-col-drag-handle):hover)) {
	border-top-left-radius: var(--table-radius);
}

:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table:not(:has(thead))) tr:first-of-type td:last-of-type,
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) th:last-child:not(:has(.table-col-drag-handle:hover)) {
	border-top-right-radius: var(--table-radius);
}

:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table):has(.table-col-btn:hover) th:last-child {
	border-top-right-radius: 0;
}

:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) tr:last-child td:first-child {
	border-bottom-left-radius: var(--table-radius);
}

:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table):has(.table-row-btn:hover) tr:last-child td:first-child {
	border-bottom-left-radius: 0;
}

:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) tr:last-child td:last-child {
	border-bottom-right-radius: var(--table-radius);
}

:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table):has(:is(.table-col-btn, .table-row-btn):hover) tr:last-child td:last-child {
	border-bottom-right-radius: 0;
}

:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) :is(th, td):not(:first-child) {
	border-left: 0;
}

:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table:not(:has(thead))) tbody tr:not(:first-of-type) td,
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table:has(thead)) tbody td {
	border-top: 0;
}

:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered) table:not(:has(thead)) tr:first-of-type,
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) thead tr {
	background-color: var(--table-header-bg);
	font-weight: bold;
}

:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered) table:not(:has(thead)) tbody tr:nth-of-type(2n+1),
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table:has(thead)) tbody tr:nth-of-type(2n) {
	background-color: var(--table-alt-line-bg);
}

:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered) table:not(:has(thead)) tbody tr:nth-of-type(2n),
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table:has(thead)) tbody tr:nth-of-type(2n+1) {
	background-color: var(--background-primary);
}