在10篇vs19天博客撰写小结中,一个待解决的问题：表格(在Octopress中并没有画出线，后续解决)
Google到为Octopress追加数据表格的CSS这篇，照着做就好了。
创建source/stylesheets/data-table.css,内容如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| * + table {
border-style:solid;
border-width:1px;
border-color:#e7e3e7;
}
* + table th, * + table td {
border-style:dashed;
border-width:1px;
border-color:#e7e3e7;
padding-left: 3px;
padding-right: 3px;
}
* + table th {
border-style:solid;
font-weight:bold;
background: url("/images/noise.png?1330434582") repeat scroll left top #F7F3F7;
}
* + table th[align="left"], * + table td[align="left"] {
text-align:left;
}
* + table th[align="right"], * + table td[align="right"] {
text-align:right;
}
* + table th[align="center"], * + table td[align="center"] {
text-align:center;
}
|
在source/_includes/head.html中，找到引用screen.css的地方，添加下面的代码
1
2
3
4
| <link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
{% if page.styles contains 'data-table' %}
<link href="{{ root_url }}/stylesheets/data-table.css" media="screen, projection" rel="stylesheet" type="text/css" />
{% endif %}
|
ok，问题解决，效果如下：
| 左对齐表头 |
中间对齐表头 |
右对齐表头 |
| 左对齐数据 |
中间对齐数据 |
右对齐数据 |
| 第二行数据 |
也是第二行 |
还是第二行 |
| 懒得写了… |
….. |
….. |
| 长数据，以便看出表头的对齐 |
长数据，以便看出表头的对齐 |
长数据，以便看出表头的对齐 |