Exuro
Exuro

Reputation: 229

Jekyll Now GitHub Pages, Tables don't show up

I have a jekyll now website and I'm trying to put in some tables. They appear fine in github but not on the website. Here's a few snippets of table formatting that I've tried with no luck.

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

I'm using default settings with Jekyll Now, so markdown is Kramdown. I saw solutions from other stack overflow posts but they don't appear to work. Is there something wrong with my formatting or do I need to do something else to get it working?

Thanks

Upvotes: 3

Views: 2902

Answers (2)

marcanuy
marcanuy

Reputation: 23962

You need to apply some styling to the tables code, for example to apply the css class tablelines you can use inline attributes {: .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}

Output using kramdown:

enter image description here

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

Upvotes: 5

streetturtle
streetturtle

Reputation: 5850

According to this GitHub issue the problem is missing styles for tables. As suggested in the ticket try to add table style from here: https://gist.github.com/andyferra/2554919

Upvotes: 1

Related Questions