在 Markdown 的表格中,并没有提供列宽的设置,而是采用自适应布局。这对于绝大多数场景已经够用了,但对于一些内容并不均匀的表格,自适应往往会让布局显得不那么美观合理,内容不够直观。这时候对列宽做一些适当排版,可以使得内容重新优雅起来。
预留列宽
当列数过多,或是其他列占用过多列宽的时候,文字总是会被挤在一起,甚至一行一字,难以阅读。这时需要对被挤压的列预留一定的列宽。我们可以通过以下方式之一对表头或内容进行修饰,以实现这一效果:
1 | content<div style="width:100px"> |
示例原文:
Column A | Column B |
---|---|
Sample Text 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Sample Text 2 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
修改后:
Column A | Column B |
---|---|
Sample Text 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Sample Text 2 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
Markdown 源码:
1 | | Column A <div style="width:7rem"/> | Column B | |
限制列宽
对于某个单元格内出现的大段文字,可能需要强制让其多次换行以省出更多横向空间,以使其不过多占用其他列的列宽,在 Markdown 表格中可以用以下方式实现:
1 | <div style="width:100px">LONG content</div> |
示例原文:
Column A | Column B | Column C |
---|---|---|
Sample Text | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | Full Story … |
修改后:
Column A | Column B | Column C |
---|---|---|
Sample Text | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
Full Story … |
Markdown 源码:
1 | | Column A | Column B | Column C | |
参考资料
-Markdown排版优化小技巧:表格列宽调整
-Markdown 技巧:如何改变表格宽度(列宽)? - 知乎
-Markdown表格宽度如何自定义,如何设置表格的列宽 | 张洪Heo