Markdown table自动修剪溢出

2023年 03月 18日

Jekyll网页中,使用Markdown table会产生一个问题:当table超过一定宽度, 会在手机端或窄屏产生整个网页的横向滚动条,打破了整体页面布局。

解决办法:在Markdown table外围加一层div,然后写相应的CSS,实现table父节点自动修剪溢出并显示滚动条。

注意:div与table之间需要有空行

Markdown

<div class="table-wrapper" markdown="block">

Title 1 | Title 2 | Title 3
--- | --- | --- 
lorem | lorem ipsum | lorem ipsum dolor 
lorem ipsum dolor sit amet | lorem ipsum dolor sit amet consectetur | lorem ipsum dolor sit amet 
lorem ipsum dolor | lorem ipsum | lorem 
lorem ipsum dolor | lorem ipsum dolor sit | lorem ipsum dolor sit amet 

</div>  

CSS

.table-wrapper {
  overflow-x: auto;
}

分类

Markdown   Jekyll

相关文章

Jekyll网站设置谷歌分析 JavaScript in Markdown MarkDown 目录树锚定位

无留言,写一条

发表失败,请重试
发送成功! 一分钟后展示,请刷新
上一篇 下一篇