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

Question

我将使用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...

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

- vancexu

Answer 1

我可以通过以下方式为Markdown表格分配样式类。它会给出一个带有黑色线框和单元格之间边框的表格。

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

这是在使用Kramdown和IAL的Jekyll版本3.1.2中发现的。IAL位于{ }内，必须紧接在markdown文件中分配给它的块的前面或后面，它们之间不能有空行。

- MikeBRal

---

这真是救命稻草！我知道我没有边框，因为没有应用样式，但是我却无法弄清楚如何让kramdown对表格应用样式。当我准备切换到HTML表格时，谷歌终于把我带到了这里（在到达这里之前尝试了很多搜索）。据我所知，这在Kramdown文档中并没有提到。 - Michael

救命稻草+1。在我看来，这将是处理表格样式的正确Kramdown方式，并被接受为原始问题的最佳答案。 - Abel Cheung

最近进行的jekyll构建中包含了整个bootstrap css。我通过在表格下方只使用{:.table-striped}就实现了与您相同的效果 - 完全不需要定义新类！ - Florian Oswald

@FlorianOswald，你能展示一下你所做的代码片段吗？ - Royi

在{..}中是否可以使用多个类？scss中的>是什么意思？我可以省略它吗？ - Timo

Answer 2

最简单的表格样式为：

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

th{
    border:2px solid #000000;
}

td{
    border:1px solid #000000;
}

- David Jacquel

---

有没有一种方法可以将其添加到kramdown源中，而无需指定模板？ - Freedom_Ben

没问题，我只是用<style>...</style>标签将其包装起来，就解决了。虽然不是最优雅的方法，但 :shrug: - Freedom_Ben

对于图片，可以像这样做：![](https://i.imgur.com/AFCCk6C.png){:class="center-img"}。在KarmDown中，如何将{:class="some-class"}链接到表格？ - Royi

@Royi，你可以提出一个真正的问题。这样获得答案的机会更大。 - David Jacquel

@DavidJacquel，看一下这个 - https://dev59.com/Sl4b5IYBdhLWcg3wrzfZ#53351810。我已经弄清楚了。 - Royi

Answer 3

我成功地做到了这样的事情：

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

KramDown使用了表格/带边框的CSS（例如在Bootstrap中定义）。

- Royi

Answer 4

我刚刚做了

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

- Florian Oswald