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
文章目录
  1. 1. 样式调整
    1. 1.1. 基础概念
    2. 1.2. 基本样式
    3. 1.3. 表头样式
    4. 1.4. 隔行变色
    5. 1.5. 悬浮变色
  2. 2. 自适应优化
    1. 2.1. 表头不换行
    2. 2.2. 首列不换行
    3. 2.3. 表格滚动条
,