美化博客hexo文章中表格显示

博客文章的样式是主题提供的，我使用的主题phase，并没有提供表格样式，所以自己修改。创建文件themes/phase/source/css/user.css，添加需要的样式:

table {
    width: 100%; /*表格宽度*/
    max-width: 65em; /*表格最大宽度，避免表格过宽*/
    border: 1px solid #dedede; /*表格外边框设置*/
    margin: 15px auto; /*外边距*/
    border-collapse: collapse; /*使用单一线条的边框*/
    empty-cells: show; /*单元格无内容依旧绘制边框*/
    border-radius: 4px;
}

table th,table td {
  height: 35px; /*统一每一行的默认高度*/
  border: 1px solid #dedede; /*内部边框样式*/
  padding: 0 10px; /*内边距*/
}
table th {
    font-weight: bold; /*加粗*/
    text-align: center !important; /*内容居中，加上 !important 避免被 Markdown 样式覆盖*/
    background: rgba(158,188,226,0.2); /*背景色*/
}
table th {
    white-space: nowrap; /*表头内容强制在一行显示*/
}
table td:nth-child(1) {
  /*首列不换行*/
    white-space: nowrap;
}
table tbody tr:nth-child(2n) {
  /*隔行变色*/
    background: rgba(102, 128, 153, 0.05);
}
table tr:hover {
    background: #efefef;
}

修改文件themes/phase/layout/_partial/head.ejs，在

<link rel="stylesheet" href="<%- config.root %>css/style.css" media="screen" type="text/css">

下面添加

<link rel="stylesheet" href="<%- config.root %>css/user.css" media="screen" type="text/css">

重新生成页面即可，样式参考文章Markdown 表格样式调整与自适应优化 中的样式