AirboZH / halo-theme-chirpy

一个Halo生态,简约且功能丰富的技术博客主题。A minimal, responsive and feature-rich Halo theme for technical writing.
https://halo.run/store/apps/app-vGuQB
MIT License
85 stars 22 forks source link

[改进] 表格显示样式问题 #148

Closed Rlxzmdd closed 7 months ago

Rlxzmdd commented 7 months ago

由markdown生成的表格第一行无局中效果。我看了下html代码,align为center。不明白咋搞了。 image 同样的文章在官方主题下是这样的: image

网站链接:https://have.somuch.work/archives/24.2.20-i2c-uart-spi-xie-yi-qu-bie

Rlxzmdd commented 7 months ago

image 查了下是这个样式引起的问题,注释掉就可以了

通过css代码注入改善了显示效果。 image

下面是所使用到的样式:

html[data-mode=light]  {
    --tb-bg: #f6f8fa;
    --tb-le: #d0d7de;
}

table tr {
    border-top: 1px solid var(--tb-le);
}
table tr:nth-child(2n) {
    background-color: var(--tb-bg);
}
table th, table td{
    padding: 6px 13px;
    border: 1px solid var(--tb-le);
    text-align: -webkit-center ;
}
@media (prefers-color-scheme: dark) {
  html{
    --tb-bg: #232323;
    --tb-le: #3a3a3a;
  }
 }
AirboZH commented 7 months ago

表格的问题在https://github.com/AirboZH/halo-theme-chirpy/pull/143 中修复过,可能还没有更新。 更新主题即可。 表头目前样式还从在一点问题,原因是halo的表格缺少thead标签。

AirboZH commented 7 months ago

表头问题已处理