markdown如何调整行距_Markdown 技巧:如何改变表格宽度(列宽)?

本文是个人学习笔记,文中技巧均来自 StackOverflow 相关问题中的回答

前言(废话区)

现在很多 Markdown 编辑器带的解析器都支持一些快捷插入表格的语法。比如 Typora,MWeb 等支持用如下语法插入表格:

第一格表头 | 第二格表头

--------- | -------------

内容单元格 第一列第一格 | 内容单元格第二列第一格

内容单元格 第一列第二格 多加文字 | 内容单元格第二列第二格

但是当表格内容稍微复杂的时候,这个基本语法可能就满足不了需求 (不过这也不能怪 Markdown,毕竟初衷就是要简单)。典型的,比如列宽,默认都是按照单元格内容自适应,或者整表列宽与行宽相同。内容一多,排版就比较混乱。下面就分享几个我刚学的,利用简单 html 语法调列宽的方法。

Case 1: 预留宽度,用于打印后填写

一个比较简单粗暴的方法自然是加一段空格符          

一个更加优雅的方法则是使用空的 标签。例如

| a | b | c |

|---|---|---|

| 1 | | 3 |使用 <img> 标签效果

Case 2: 长文本需要指定列宽,控制换行

第一种方法可以使用

[单元格文本]
的形式,长度单位可以是 pt , px, cm等。比如:

**默认**

| a | b | d |

|---|---|---|

| 1 | very very very very very long long long long long text | 3 |

**使用后效果**

| a | b | d |

|---|---|---|

| 1 |

very very very very very lonng long long long long text
| 3 | Markdown 中调整表格列宽

第二种方法可以从外部定义一个 「Style」来指定各列的列宽

table th:first-of-type {

width: 4cm;

}

table th:nth-of-type(2) {

width: 150pt;

}

table th:nth-of-type(3) {

width: 8em;

}

| a | b | c |

|---|---|---|

| 列宽 = 3 cm| 列宽 = 5 cm| 列宽 = 8em |用绝对长度定义列宽

当然你可以把单位改成 % 这样就相当于按照所占行宽的比例来分配列宽

table th:first-of-type {

width: 20%;

}

table th:nth-of-type(2) {

width: 30%;

}

table th:nth-of-type(3) {

width: 50%;

}

| a | b | c |

|---|---|---|

| 列宽 = 10% 行宽| 列宽 = 30% 行宽 |列宽 = 60% 行宽 |根据行宽指定比例分配列宽

需要指出的是,这种方法是全局起效的。如果你在一篇文章中,需要不同样式的表格,那么就需要额外的利用 css 语言定义不同种的表格类,这里不展开了。不是很推荐这样做,因为这样就失去 Markdwon 的核心价值了。

一个问题:如果各列百分比加起来不是 100% 结果怎么样?自己去测试吧 ️

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值