Jekyll 现在 GitHub 页面、表格不显示

Question

我有一个 jekyll now 网站，我正在尝试放入一些表格。它们在 github 中看起来很好，但在网站上却不然。以下是我尝试过的一些表格格式片段，但没有成功。

| P | Q | P * Q |
| - | - | - |
| T | T | T |
| T | F | F |
| F | T | F |
| F | F | F |

|====+====|
+====|====+
|=========|

|---|---|---|
|a  | b | c|
| 1|2|3|

|---+---+---|
+ :-: |:------| ---:|
| :-: :- -: -
:-: | :-

|-----------------+------------+-----------------+----------------|
| Default aligned |Left aligned| Center aligned  | Right aligned  |
|-----------------|:-----------|:---------------:|---------------:|
| First body part |Second cell | Third cell      | fourth cell    |
| Second line     |foo         | **strong**      | baz            |
| Third line      |quux        | baz             | bar            |
|-----------------+------------+-----------------+----------------|
| Second body     |            |                 |                |
| 2 line          |            |                 |                |
|=================+============+=================+================|
| Footer row      |            |                 |                |
|-----------------+------------+-----------------+----------------|

我使用的是 Jekyll Now 的默认设置，所以 markdown 是 Kramdown。我从其他堆栈溢出帖子中看到了解决方案，但它们似乎不起作用。我的格式有问题还是我需要做其他事情才能使其正常工作？

谢谢

Answer 1

您需要对 tables 应用一些样式代码，例如要应用 css 类 tablelines，您可以使用内联属性 {: .tablelines} :

<style>
.tablelines table, .tablelines td, .tablelines th {
        border: 1px solid black;
        }
</style>

| P | Q | P * Q |
| - | - | - |
| T | T | T |
| T | F | F |
| F | T | F |
| F | F | F |
{: .tablelines}

|---|---|---|
|a  | b | c|
| 1|2|3|
{: .tablelines}

|-----------------+------------+-----------------+----------------|
| Default aligned |Left aligned| Center aligned  | Right aligned  |
|-----------------|:-----------|:---------------:|---------------:|
| First body part |Second cell | Third cell      | fourth cell    |
| Second line     |foo         | **strong**      | baz            |
| Third line      |quux        | baz             | bar            |
|-----------------+------------+-----------------+----------------|
| Second body     |            |                 |                |
| 2 line          |            |                 |                |
|=================+============+=================+================|
| Footer row      |            |                 |                |
|-----------------+------------+-----------------+----------------|
{: .tablelines}

| A simple | table |
| with multiple | lines|
{: .tablelines}

使用 kramdown 输出:

<style>
.tablelines table, .tablelines td, .tablelines th {
        border: 1px solid black;
        }
</style>

<table class="tablelines">
  <thead>
    <tr>
      <th>P</th>
      <th>Q</th>
      <th>P * Q</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>T</td>
      <td>T</td>
      <td>T</td>
    </tr>
    <tr>
      <td>T</td>
      <td>F</td>
      <td>F</td>
    </tr>
    <tr>
      <td>F</td>
      <td>T</td>
      <td>F</td>
    </tr>
    <tr>
      <td>F</td>
      <td>F</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

<table class="tablelines">
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

<table class="tablelines">
  <thead>
    <tr>
      <th>Default aligned</th>
      <th style="text-align: left">Left aligned</th>
      <th style="text-align: center">Center aligned</th>
      <th style="text-align: right">Right aligned</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First body part</td>
      <td style="text-align: left">Second cell</td>
      <td style="text-align: center">Third cell</td>
      <td style="text-align: right">fourth cell</td>
    </tr>
    <tr>
      <td>Second line</td>
      <td style="text-align: left">foo</td>
      <td style="text-align: center"><strong>strong</strong></td>
      <td style="text-align: right">baz</td>
    </tr>
    <tr>
      <td>Third line</td>
      <td style="text-align: left">quux</td>
      <td style="text-align: center">baz</td>
      <td style="text-align: right">bar</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Second body</td>
      <td style="text-align: left"> </td>
      <td style="text-align: center"> </td>
      <td style="text-align: right"> </td>
    </tr>
    <tr>
      <td>2 line</td>
      <td style="text-align: left"> </td>
      <td style="text-align: center"> </td>
      <td style="text-align: right"> </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer row</td>
      <td style="text-align: left"> </td>
      <td style="text-align: center"> </td>
      <td style="text-align: right"> </td>
    </tr>
  </tfoot>
</table>

<table class="tablelines">
  <tbody>
    <tr>
      <td>A simple</td>
      <td>table</td>
    </tr>
    <tr>
      <td>with multiple</td>
      <td>lines</td>
    </tr>
  </tbody>
</table>