Markdown table自动修剪溢出

March 18, 2023

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;
}

Category

Markdown   Jekyll

You may also like

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

No comments yet, leave a comment

Sending failed, please try again.
Sending succeeded! It will be displayed in one minute, please refresh.
Newer Older