虽然 MarkDown 的表格语法很给力,但是说实话生成的表格样式真心不敢恭维,真的好难看呀!今天无意中看到一个 MarkDown 表格样式优化的文章很不错,我已经用上了,效果还是很满意的,今天就分享给大家。
Markdown 写的表格最终会被解析成 HTML 代码,如果使用的编辑器支持自定义 CSS,就能方便的调整样式。如果可以引入 JavaScript,样式自适应也能较好地实现。
先来个样例表格感受一下样式调整优化后的效果:
姓名 | 年龄 | 性别 | 民族 |
---|---|---|---|
张三丰 | 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;
}
6 条评论
这一整天就是在整表格问题。
呵呵,把我这个CSS代码放到主题的自定义CSS里面,表格问题很好解决的!你要是懂CSS,甚至可以自己制作自己的表格样式!
MarkDown 可真是强大呀!
是的,很强大,主要是编辑技术性文章的时候很实用!
这个好呀!不知道CSS代码可以用到 WordPress 里嘛?
理论上应该是可以的!