虽然 MarkDown 的表格语法很给力,但是说实话生成的表格样式真心不敢恭维,真的好难看呀!今天无意中看到一个 MarkDown 表格样式优化的文章很不错,我已经用上了,效果还是很满意的,今天就分享给大家。

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

MarkDown.jpg

先来个样例表格感受一下样式调整优化后的效果:

姓名年龄性别民族
张三丰100汉族
张翠山35汉族
殷素素33汉族
张无忌12汉族
赵敏12蒙古族
小昭12波斯人

基础概念

  • <table>: 表格
  • <thead>: table header 表头区
  • <th>: table headings 表头单元格内容
  • <tbody>: 表格内容区
  • <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> 包裹内容,那下面就相当于从表格第二行开始计数

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

悬浮变色

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

table tr:hover {
    background: #efefef; 
}

自适应优化

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

表头不换行

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

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

首列不换行

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

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
$("table").wrap("<div class='table-area'></div>");

同时添加如下 CSS

.table-area {
    overflow: auto;
}

原文出处:http://www.tuicool.com/articles/mueEZjr

最后修改:2017 年 08 月 23 日
如果觉得我的文章对你有用,请随意赞赏