web-dev-qa-db-ja.com

Jekyll＆KramDown-テーブルの枠を表示する方法

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...

しかし、テーブルには境界線がありません。境界線を表示する方法。

htmlcssmarkdownjekyllkramdown
27
vancexu

最小のテーブルスタイルは

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

th{
    border:2px solid #000000;
}

td{
    border:1px solid #000000;
}
16
David Jacquel

このようにして、マークダウンテーブルにスタイルクラスを割り当てることができました。それは黒い線の境界線とセル間の境界線を持つテーブルを与えます。

マークダウンの例：ファイル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は{}内にあり、マークダウンファイルで割り当てられているブロックの直前または直後にあり、それらの間に空白行はありません。

25
MikeBRal

私はなんとかこのようなことをすることができました：

{: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で定義されています）。

1
Royi

私はただやった

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