Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get rid of table borders in markdown?

Tags:

html

css

markdown

This is my markdown code

|Time  | Length | Speed   | Mass |    
|  --- | ---  | ---      | ---      |
|   -Millisecond   |  Millimetre  | Kilometre per hour | Milligram |   
|    Second   |   Centimetre   |  Foot per second |     Gram     |  
|     Minute  |     Inch |     Miles per hour     |    Ounce      |     
|   Hour   |    Foot  |       Knot   |        Pound  |  
|       Day    |   Yard   |   Metre per second       |    Kilogram      |  
|     Week  |    Metre  |          |   Us ton       |  
|     Month  |    Kilometre  |          |Tonne          |  
|     Year  |     Mile |          |        Imperial ton  |  
|      Decade |     Nautical mile |          |          |  
|  Century     |      |          |          |  
|   Millennium    |      |          |          |  

I was wondering if it was possible to make it so that the table has no borders.

Thanks

like image 332
TonyMan Avatar asked Aug 31 '20 04:08

TonyMan


3 Answers

There's no mechanism in Markdown itself to hide table borders. You can override table CSS styles for generated HTML, but that will work only if you have access to CSS.

For services like Github where CSS styles are predefined by service owner and cannot be overriden the table borders simply cannot be hidden.

like image 82
blami Avatar answered Oct 06 '22 08:10

blami


You can try to add a <style> tag at the top of your markdown file with rules to remove the border on <td> and <tr> elements.

But unfortunately I noticed it will only work locally on a preview. Github sanitizes the inline style and script tags

<style>
td, th {
   border: none!important;
}
</style>


| Time         | Length        | Speed              | Mass         |
| ------------ | ------------- | ------------------ | ------------ |
| -Millisecond | Millimetre    | Kilometre per hour | Milligram    |
| Second       | Centimetre    | Foot per second    | Gram         |
| Minute       | Inch          | Miles per hour     | Ounce        |

screenshot

like image 34
Ron Erlih Avatar answered Oct 06 '22 09:10

Ron Erlih


Just add :

<style>
table {
    border-collapse: collapse;
}
table, th, td {
   border: 1px solid black;
}
blockquote {
    border-left: solid blue;
    padding-left: 10px;
}
</style>

| Column One    | Column Two    |                                                                                                                                                   
| ---           | ---           |                                                                                                                                                   
| data cell one | data cell two |                                                                                                                                                   

And you will obtain a nice, function table with all borders of all cells.

like image 1
aurelien Avatar answered Oct 06 '22 08:10

aurelien