928° 20171,334字0条评论

关于 Bitcron 表格的各种

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

表格语法

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

项目 价格 描述
尺子 ¥2 说明内容,也可为空
本子 ¥8 (描述偷懒不写完第三项也可以,不会破坏表格结构)
```

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

项目 价格 描述
尺子 ¥2 说明内容,也可为空
本子 ¥8 (描述偷懒不写完第三项也可以,不会破坏表格结构)

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

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

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

项目 价格 描述
尺子 左边尺子的价格留空
本子 ¥8 (描述偷懒不写完第三项也可以,不会破坏表格结构)
```

项目 价格 描述
尺子 左边尺子的价格留空
本子 ¥8 (描述偷懒不写完第三项也可以,不会破坏表格结构)

留空第一项

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

项目 价格 描述
我是第三项
本子 ¥8 (描述偷懒不写完第三项也可以,不会破坏表格结构)

于是我想了几个办法:

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

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

效果 写法
* 也可以直接写

***---<hr/>

<br/>
行一
行二
行一<br/>行二

文本对齐

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

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

项目 价格 描述
尺子 ¥20 ?
本子 ¥8
```

项目 价格 描述
尺子 ¥20 ?
本子 ¥8

表格样式

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

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;

另外发现 precode 的默认字体大小只有 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 里写好再复制黏贴。虽然有点麻烦,但好在也是个办法。不然文章写到一半因为技术原因不能完成的郁闷心情,在我这个年纪已经承受不起了。

EOF
680°
生活2012 (7P)
Comments
Write a Comment
点击加载Disqus