有没有办法使用 HTML 溢出降价 table？

Question

我在 GitHub 页中使用 jekyll 构建了一个博客。我的一篇帖子（用 markdown 写的）有一个 table，它在智能手机中溢出，生成整个页面的水平滚动条。

我想知道是否有一些方法可以像下面这样写 HTML + markdown，只溢出 div，而不是整个页面。

<div style="overflow-x: scroll;">

    |                        |ODBC | SSMS | SQLCMD | ISQL|
    |---                     |:---:|:---: |:---:   |:---:|
    |ANSI_NULL_DFLT_ON       | ON  | ON   | ON     | OFF |
    |ANSI_NULLS              | ON  | ON   | ON     | OFF |

</div>

Answer 1

不，您不能简单地添加一个 html 包装器，但您还有其他几个选项。

如果您使用的是 Kramdown Markdown 引擎，只需使用以下代码片段添加一个包装器（注意 div 标签和 markdown 块之间的空行。这是必需的。）：

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

|                        |ODBC | SSMS | SQLCMD | ISQL|
|---                     |:---:|:---: |:---:   |:---:|
|ANSI_NULL_DFLT_ON       | ON  | ON   | ON     | OFF |
|ANSI_NULLS              | ON  | ON   | ON     | OFF |

</div>

然后您可以将 css 规则添加到您的 sass/css 文件并在此处设置溢出隐藏。

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

这是一种仅为选定表设置溢出的明确方法。

有没有办法使用 HTML 溢出降价 table？

Is there a way to overflow a markdown table using HTML?

markdown

jekyll