Markdown 表格样式调整与自适应优化

　　Markdown 写的表格最终会被解析成 HTML 代码，如果使用的编辑器支持自定义 CSS，就能方便的调整样式。如果可以引入 JavaScript，样式自适应也能较好地实现。

See the Pen Table style by MOxFIVE (@MOxFIVE) on CodePen.

样式调整

基础概念

<table>: 表格
<thead>: table header 表头区
<th>: table headings 表头单元格内容
<tbody>: table body 表格内容区
<tr>: table row 表行
<td>: table data 单元格内容

基本样式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
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; /*内边距*/
}

表头样式

1
2
3
4
5
table th {
    font-weight: bold; /*加粗*/
    text-align: center !important; /*内容居中，加上 !important 避免被 Markdown 样式覆盖*/
    background: rgba(158,188,226,0.2); /*背景色*/
}

隔行变色

使用选择器选取复数行设置背景色。一般 Markdown 表格编译后都有 <tbody> 包裹内容，那下面就相当于从表格第二行开始计数

1
2
3
table tbody tr:nth-child(2n) {
    background: rgba(158,188,226,0.12);
}

悬浮变色

鼠标悬浮时该行改变背景色

1
2
3
table tr:hover {
    background: #efefef;
}

自适应优化

表格用 Markdown 书写，编辑器解析，因而只能在已经生成好的代码上进行自适应优化。

表头不换行

设置表头单元格内容不换行，这样可以通过表头控制该列的最小宽度，避免浏览器窗口缩小时内容被压缩得太紧

1
2
3
table th {
    white-space: nowrap; /*表头内容强制在一行显示*/
}

首列不换行

表格第一列单元格内容不换行，多数情况下表格首列不应该被压缩换行

1
2
3
table td:nth-child(1) {
    white-space: nowrap;
}

表格滚动条

添加 JavaScript 代码，用一个 <div> 把表格包裹起来，父元素宽度不足时显示横向滚动条，避免表格撑破布局

1
2
3
4
5
6
7
[].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

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

同时添加如下 CSS

1
2
3
.table-area {
    overflow: auto;
}

To be added