Search code examples
visual-studio-codegithub-flavored-markdown

'Horizontal' Tables in Markdown (gitHub flavour)


I'm using VS Code 1.86.2 on Ubuntu 22.

I'm trying to get it to render a 'horizontal' table (if that's the right term), whereby the first column is the heading, and is shaded, or in bold text:

| Head 1 | Col 1 |
| Head 2 | Col2  |

I tried this, but it just puts a line break across the page:

Head 1      Col 1
----------- --------------
Head 2      Col 2
----------- --------------

Solution

  • Markdown does not support landscape tables out of the box. The closest you can get with native Markdown is something like this (note that all the header entries are bold):

    | **Heading 1**   | Content 1 | Content 2 |
    | -------------   | --------- | --------- |
    | **Heading 2**   | Content 3 | Content 4 |
    | **Heading 3**   | Content 5 | Content 6 |
    
    Heading 1 Content 1 Content 2
    Heading 2 Content 3 Content 4
    Heading 3 Content 5 Content 6

    However, if you are in an environment that supports HTML and CSS you can use something like this:

    <style>
      th:first-child {
        font-weight: bold;
      }
    
      th {
        font-weight: normal;
      }
    
      .bold-first-column td:first-child {
        font-weight: bold;
      }
    </style>