hexo使用表格

发表于 | 分类于 | 本文总阅读量 次

绘制表格

句法

| 分列，- 分行
:-: 居中， :- 左对齐， -: 右对齐

绘制表格时需在表格上方空出一行，否则表格可能无法正确显示。 

1
2
3
4
5

| Tittle1 | Tittle2 | Tittle3 |
| :------ | :-----: | ------: |
| Content | Content | Content |
| Content | Content | Content |

效果

Tittle1 Tittle2 Tittle3
Content Content Content
Content Content Content

左对齐/居中/右对齐无法正确显示的问题

无论怎么更改，表格都保持左对齐/居中/右对齐，而网页后台上却表现正常时：

注：本博文使用主题Next（不过主体不同逻辑估计也差不多）

到themes\next\source\css\_common\scaffolding目录下，
打开tables.styl文件，发现文件规定了表格的显示样式。查看文件内容，找到规定表格标题和内容的位置的内容，发现引用了·$table-content-alignment和$table-content-vertical两个变量，分别规定单元格内容的左右和上下位置，因此需找到表格的变量定义处。 

1
2
3
4
5
6
caption, th, td {
  padding: $table-cell-padding;
  text-align: $table-content-alignment;
  vertical-align: $table-content-vertical;
  font-weight: normal;
}

到themes/next/source/css/_variables目录下
打开base.styl文件，发现其中规定了所有变量名及其值；找到与table相关的部分： 

1
2
3
4
5
6
7
8
9
10
11
12
13
// Table
// --------------------------------------------------
$table-width                    = 100%
$table-border-color             = $gray-lighter
$table-font-size                = 14px
$table-content-alignment        = left
$table-content-vertical         = middle
$table-th-font-weight           = 700
$table-cell-padding             = 8px
$table-cell-border-right-color  = $gainsboro
$table-cell-border-bottom-color = $gray-lighter
$table-row-odd-bg-color         = #f9f9f9
$table-row-hover-bg-color       = $whitesmoke

将$table-content-alignment = left一行限制了表格的排版方式（罪魁祸首！！！）
将此行删除，删除后由于没有了文件规定，故采用默认的排版方式；此时默认排版方式为左对齐，表格的左右对齐可由上述md语句更改。

更改后：

1
2
3
4
5
6
7
8
9
10
11
12
// Table
// --------------------------------------------------
$table-width                    = 100%
$table-border-color             = $gray-lighter
$table-font-size                = 14px
$table-content-vertical         = middle
$table-th-font-weight           = 700
$table-cell-padding             = 8px
$table-cell-border-right-color  = $gainsboro
$table-cell-border-bottom-color = $gray-lighter
$table-row-odd-bg-color         = #f9f9f9
$table-row-hover-bg-color       = $whitesmoke

表格其他设置或博客其他组件如需自定义同理。