title: Markdown 表格样式调整与自适应优化
date: 2016-03-04 20:39:17
categories:
- 术业专攻
tags:
- Markdown
- Table
- CSS
- JavaScript
permalink: markdown-table-style
---

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

<!-- more -->

<p data-height="300" data-theme-id="0" data-slug-hash="ONyKqb" data-default-tab="css" data-user="MOxFIVE" class="codepen">See the Pen <a href="http://codepen.io/MOxFIVE/pen/ONyKqb/">Table style</a> by MOxFIVE (<a href="http://codepen.io/MOxFIVE">@MOxFIVE</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

## 样式调整

### 基础概念

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


### 基本样式

``` 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; /*内边距*/
}
```

### 表头样式

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

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

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

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

``` css
table tr:hover {
    background: #efefef; 
}
```


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

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

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

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

``` css
table td:nth-child(1) {
    white-space: nowrap; 
}
```

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

``` js
[].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

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

- 同时添加如下 CSS

``` css
.table-area {
    overflow: auto;
}
```


- To be added