Jekyll & KramDown - 如何显示表格边框答案

【问题标题】：Jekyll & KramDown - How to Display Table BorderJekyll & KramDown - 如何显示表格边框
【发布时间】：2015-03-02 09:17:07
【问题描述】：

我正在使用 Jekyll 默认 kramdown。我有一张使用

显示的表格

surround text, etc.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

surround text...

但是表格没有边框。如何显示边框。

【问题讨论】：

标签： html css markdown jekyll kramdown

【解决方案1】：

我能够通过这种方式将样式类分配给降价表。它给出了一个带有黑线边框和单元格之间边框的表格。

Markdown 示例：在文件 hello-world.md 中

| Item | Description | Price |
| --- | --- | ---: |
| item1 | item1 description | 1.00 |
| item2 | item2 description | 100.00 |
{:.mbtablestyle}

/_sass/ 目录下 _base.scss 文件中的 SCSS

.mbtablestyle {
        border-collapse: collapse;

   > table, td, th {
        border: 1px solid black;
        }
}

这是在 jekyll 版本 3.1.2 中，它使用带有 IAL 的 Kramdown。 IAL 在 { } 内，并且必须在 markdown 文件中分配给它的块之前或之后，它们之间没有空行。

【讨论】：

这是一个救生员！我知道我没有边框，因为没有应用任何样式，但是对于我的生活，我无法弄清楚如何让 kramdown 将样式应用于表格。当谷歌终于把我带到这里时，正准备为表格切换到 HTML（在到达这里之前尝试了很多搜索）。据我所知，这不在 Kramdown 文档中。
救命稻草+1。恕我直言，这将是处理表格样式的正确 Kramdown 方式，并被接受为原始问题的最佳答案。
在最近的 jekyll 构建中，包含了整个引导 css。我只需在表格下方说 {:.table-striped} 即可实现与您相同的效果 - 根本不需要定义新类！
@FlorianOswald，你能展示一下你所做的代码 sn-p 吗？
是否可以在 {..} 中使用多个类？ > 在 scss 中是什么意思？可以省略吗？

【解决方案2】：

最小的表格样式是

table{
    border-collapse: collapse;
    border-spacing: 0;
    border:2px solid #ff0000;
}

th{
    border:2px solid #000000;
}

td{
    border:1px solid #000000;
}

【讨论】：

有没有办法将它添加到 kramdown 源中而无需指定模板？
nm，我只是将它包裹在 <style>...</style> 标签中，就做到了。不是最优雅的，但 :shrug:
对于图像，可以执行![](https://i.imgur.com/AFCCk6C.png){:class="center-img"} 之类的操作。如何将{:class="some-class"} 链接到 KarmDown 中的表？
@Royi，你可以问一个真正的问题。获得答案的机会更大。
@DavidJacquel，在 - stackoverflow.com/a/53351810/195787 上放松一下。我想通了。

【解决方案3】：

我设法做到了这样的事情：

{:class="table table-bordered"}
| Tex Space     | Blue Space        | Lambda            |
|-------------- |----------------   |------------------ |
| sXYZ          | sBlue             | sXYZ abcde fghy   |
| Jaobe XTZ     | Blue Game 5.2     | 5.2               |

KramDown 使用了 Table / Table Bordered 的 CSS（例如它在 Bootstrap 中定义）。

【讨论】：

【解决方案4】：

我刚刚做了

| Item | Description | Price |
| --- | --- | ---: |
| item1 | item1 description | 1.00 |
| item2 | item2 description | 100.00 |
{:.table-striped}

【讨论】：