Markdown 中的响应式表格答案

【问题标题】：Responsive Table in MarkdownMarkdown 中的响应式表格
【发布时间】：2018-09-25 10:34:13
【问题描述】：

如何使降价表响应式？我正在使用呈现降价文件的 Jekyll。

这是一个表格示例

| Tables   |      Are      | Tables   |      Are      | Tables 
|----------|:-------------:|----------|:-------------:|-------------:|
|  <img src="https://www.google.com.pk/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwjZl8ji8r_dAhUIsqQKHSA1Cz0QjRx6BAgBEAU&url=https%3A%2F%2F" width="100" /> | hello | hello |hello | hello

我在<tr> 中显示了5 个<img> 标签。它在大屏幕上完美呈现，但在小屏幕或移动设备上没有响应。

我正在使用 Jekyll 静态站点生成器，它使用降价文件。

【问题讨论】：

您使用的是引导程序还是其他任何框架？
不，只有 css。
如果 Jekyll/Kramdown 渲染的 html 没问题，你的问题是关于 css 的。

标签： markdown jekyll github-flavored-markdown

【解决方案1】：

您需要为此编写 CSS。 Jekyll 只是将你的 markdown 文件（使用kramdown）转换为简单的 HTML，然后它是一个 CSS 使 HTML 表格响应。这是一篇关于响应式表格的好文章：https://css-tricks.com/accessible-simple-responsive-tables/

【讨论】：