set background color for specific cell in markdown table

I found an example of Markdown table styling here that worked with Microsoft Visual Studio Code preview.

The following example gives this result:

demo

## Table Styling in Markdown

<style>
    .heatMap {
        width: 70%;
        text-align: center;
    }
    .heatMap th {
        background: grey;
        word-wrap: break-word;
        text-align: center;
    }
    .heatMap tr:nth-child(1) { background: red; }
    .heatMap tr:nth-child(2) { background: orange; }
    .heatMap tr:nth-child(3) { background: green; }
</style>

<div class="heatMap">

| Everything | in this table | is Centered | and the table will only take up 70% of the screen width | 
| -- | -- | -- | -- |
| This | is | a | Red Row |
| This | is | an | Orange Row |
| This | is | a | Green Row |

</div>

The background-color is a part of the style. Markdown is only for content and structure.

But you can use css selectors

  • if you can use css3: td:nth-child(n)
  • with css2: td + td and overwrite it again td + td + td

Both versions with your example

Tags:

Markdown