关于 Bitcron 表格的各种

迁移到 Bitcron 以来，研究过语法，折腾过主题，但一直没来得及做笔记。恰好昨天发现手机上的表格宽度有些问题，今天找到了解决办法想记下来，于是干脆整合一篇关于 Bitcron 表格的贴士。

表格语法

Bitcron 相比于 FarBox，表格语法又简洁了一个等级。我喜欢它现在跟代码一样的表达方式，简单好记¹。

以上代码会呈现如下的样式：

在实际使用过程中，我发现除了以上提到的“偷懒不写完第三项”以外，我还遇到过“只空第二项”或者“空第一项”的场合，这时候直接忽略就不行了，得分情况讨论（妥妥的理科生思维）。

除第一项和最后一项之外需要留空

还是拿官方代码做例子，假如尺子的价格为空，那么直接空格就行：

留空第一项

如果需要留空第一项，也就是第二项往后需要填写内容，那么直接空格就行不通了。

于是我想了几个办法：

1. 随意写个符号占个位，比如 * # . 等等；
2. 填入 *** 或 ---，相当于 <hr/>，所以表格中间会呈现出一条线，还能表达“此处无效”的效果；
3. 填入 <br/>，也就是另起一行，这么一来直接显示空格。

另外关于 <br/>，也可以用于每格中的改行。

文本对齐

文本对齐只能按照列来分，也就是说不同行的对齐方式不能不一样。

第一行是表格的第一栏，每个项的文本中可以追加(-)、(>)、(<)来实现某列内的文本对齐，它们也分别等同于(center)、(right)、(left)。

表格样式

上面的表格所呈现出来的样式是我自定义过的。如果使用官方模板会自带样式，官方跟我这个也差不太多。以下是主题「你好呀」的表格样式：

table {
    background-color: #f5f5f5;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #eee;
    width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
}
th, td {
    border-left: 1px solid #eee;
    padding: 0.5em 1em;
    vertical-align: middle;
    border-top: 1px solid #eee;
}
th {
    font-weight: bold;
}
table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th {
    background-color: #f9f9f9;
}

宽度100%

作为一个单栏主题，width: 100% 必不可少。刚开始也没发现问题。昨天正好写了两篇博文都有很大的表格用量，内容也多，偶然用手机查看时发现表格溢出了。于是谷歌后发现有个解决办法，用 table-layout: fixed 将表格锁住使之不溢出，然后我又聪明地加上了 word-wrap: break-word，这么一来即使格子里的内容太长也能自动断行，而不会重叠在一起。

table-layout: fixed;
word-wrap: break-word;

2017.08.21更新：因为发现 table-layout: fixed; 会将 columns 均分，在大屏下的排版反而不够合理，所以更新一下方法。

word-break: break-all;

另外发现 pre 和 code 的默认字体大小只有 13px，而文字的默认大小是 16px，也就是说只是普通文字的0.8125倍，难怪看起来很美观。受其启发把表格里的字符也改成了 0.9em，感觉不错。

隔行不同色

为了表格的易读性，我从官方样式表中扒了一个写法。nth-child(odd) 表示奇数行，给它加个浅色背景就能跟偶数行进行区分了。更多呈现形式可以自行搜索 nth-child 的用法。

table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th {
    background-color: #f9f9f9;
}

这篇文章写到一半，Bitcron 突然不同步了，只好改到网页客户端里继续写。因为不习惯，所以在 MarkdownPad 里写好再复制黏贴。虽然有点麻烦，但好在也是个办法。不然文章写到一半因为技术原因不能完成的郁闷心情，在我这个年纪已经承受不起了。