在Ty主题上添加表格样式

这是一个测试表格的文章。

操作方法

1.把下面的代码添加到主题style.css（或其他主要CSS文件）即可。除了基本样式必须添加之外，其他部分都可以根据实际需要添加

/*基本样式*/
table {
    width: 100%; /*表格宽度*/
    max-width: 65em; /*表格最大宽度，避免表格过宽*/
    border: 1px solid #dedede; /*表格外边框设置*/
    margin: 15px auto; /*外边距*/
    border-collapse: collapse; /*使用单一线条的边框*/
    empty-cells: show; /*单元格无内容依旧绘制边框*/
}
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 tbody tr:nth-child(2n) {
  background: rgba(158,188,226,0.12); 
}
/*悬浮变色*/
table tr:hover {
  background: #efefef; 
}
/*自适应优化
1.表头内容强制在一行显示*/
table th {
    white-space: nowrap; 
}
/*2.首列不换行*/
table td:nth-child(1) {
    white-space: nowrap; 
}
/*3.表格滚动条*/
.table-area {
    overflow: auto;
}

2.如果需要在宽度不够长时在表格显示滚动条的话，还需要把下面的代码添加到主题的主要JS文件，下面两种形式选一种即可。
JavaScript原生代码

[].slice.call(document.querySelectorAll('table')).forEach(function(el){
    var wrapper = document.createElement('div');
    wrapper.className = 'table-area';
    el.parentNode.insertBefore(wrapper, el);
    el.parentNode.removeChild(el);
    wrapper.appendChild(el);
})

jQuery代码（使用前请加载jQuery）

$("table").wrap("<div class='table-area'></div>");

3.Typecho的编辑器没有插入表格的功能，Markdown插入表格的语法可以参考：

| 一个普通标题 | 一个普通标题 | 一个普通标题 |
| ------ | ------ | ------ |
| 短文本 | 中等文本 | 稍微长一点的文本 |
| 稍微长一点的文本 | 短文本 | 中等文本 |

演示

注意，使用时发现，表格的语句上一行必须为空行，不然表格不生效。

| 左对齐标题 | 右对齐标题 | 居中对齐标题 |
| :------| ------: | :------: |
| 短文本 | 中等文本 | 稍微长一点的文本 |
| 稍微长一点的文本 | 短文本 | 中等文本 |

演示

语法说明

1）|、-、:之间的多余空格会被忽略，不影响布局。
2）默认标题栏居中对齐，内容居左对齐。
3）-:表示内容和标题栏居右对齐，:-表示内容和标题栏居左对齐，:-:表示内容和标题栏居中对齐。
4）内容和|之间的多余空格会被忽略，每行第一个|和最后一个|可以省略，-的数量至少有一个。