Reputation: 229
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
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:
<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
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