2017-04-04 91 views
1

我有一個jekyll現在的網站,我正在嘗試放入一些表格。它們在github中看起來很好,但在網站上卻沒有。這裏有幾個表格格式的代碼片段,我試過沒有運氣。Jekyll Now GitHub Pages,Tables does not show up

| 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現在使用默認設置,因此降價是Kramdown。我看到了來自其他堆棧溢出帖子的解決方案,但它們看起來不起作用。我的格式有什麼問題嗎?還是需要做其他工作才能使其工作?

感謝

回答

2

你需要一些造型適用於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:

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

這正是我想要的。非常感謝。很棒! – Exuro