Flarum 完美markdown table表格github风格美化教程

nauyx

为啥要美化

因为原本的样式惨不忍睹

虽然有大佬已经发布过这篇了 https://discuss.flarum.org.cn/d/2468，但是风格始终还是不满意

我要的风格是这样的（美化后的截图），可以到我搭建的网站看：https://www.nauyxsec.com

QQ截图20220729155936.png

美化教程

要装两个插件：FoF Formatting & Markdown Tables

这部还是一样的。FoF Formatting 记得勾上 table的那个

然后在后台-外观-自定义样式添加如下的代码

table {
    table-layout:fixed;
    padding: 0;
    word-break: break-all;
    border-collapse: collapse;
    margin: 0.8em 0;
    width: 100%;
}
table tr {
    border: 1px solid #dfe2e5;
    margin: 0;
    padding: 0;
}
table tr:nth-child(2n), thead {
    background-color: #f8f8f8;
}
table th {
    font-weight: bold;
    border: 1px solid #dfe2e5;
    border-bottom: 0;
    margin: 0;
    padding: 6px 13px;
    width: auto ! important;
}
table td {
    border: 1px solid #dfe2e5;
    margin: 0;
    padding: 6px 13px;
}
table th:first-child, table td:first-child {
    margin-top: 0;
}
table th:last-child, table td:last-child {
    margin-bottom: 0;
}

刷新下缓存就可以了，同时也支持手机版，不会超出边界。

本文首发在我的个人博客

https://blog.nauyxsec.com/archives/61.html

松鼠爱摸鱼

很不错😀

BA7IEE

我加了个根据内容自动调整列宽和自适应

table {
    table-layout: auto; /* 自动调整列宽 */
    padding: 0;
    word-break: break-all;
    border-collapse: collapse;
    margin: 0.8em 0;
    width: 100%; /* 表格宽度自适应 */
}

table tr {
    border: 1px solid #dfe2e5;
    margin: 0;
    padding: 0;
}

table tr:nth-child(2n), thead {
    background-color: #f8f8f8;
}

table th {
    font-weight: bold;
    border: 1px solid #dfe2e5;
    border-bottom: 0;
    margin: 0;
    padding: 6px 13px;
    width: auto !important; /* 确保列宽自动调整 */
}

table td {
    border: 1px solid #dfe2e5;
    margin: 0;
    padding: 6px 13px;
}

table th:first-child, table td:first-child {
    margin-top: 0;
}

table th:last-child, table td:last-child {
    margin-bottom: 0;
}

小小白哦

BA7IEE 不错，希望大佬可以把这篇文章标签改为样式

小小白哦

BA7IEE 用了一下你的代码，通知的 UI 显示错误：

BA7IEE 扩展名 FoF Upload，开启后什么都不填就能运行，建议别碰扩展设置，搞不好就废😄

BA7IEE

小小白哦我是小白，现在还在折腾那个图片上传，研究不明白

BA7IEE

我用了
FoF Upload ImageX
可以正常上传什么的，就是显示没办法灯箱效果