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 單元格内容

基本樣式

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); /*背景色*/
}

隔行變色

使用選擇器選取復數行設置背景色。一般 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> 把表格包裹起来，父元素寬度不足時顯示横向滾動條，避免表格撑破布局

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