azure-devopshtml-tableyamlmarkdownazure-devops-wiki

Coloring table rows in Azure Wiki


How can I create colored rows in table in Azure Devops Wiki? I want to create something like below

.table-striped th {
  height: 45px;
  background-color: #bfff00 !important;
  color: #191919;
}

.table-striped tr:nth-child(even) td {
  background-color: #4287f5;
}
	<div>
	  <table class="table-striped">
		<tr>
		  <th>Header 1</th>
		  <th>Header 2</th>
		  <th>Header 3</th>
		</tr>
		<tr>
		  <td>Cell 1</td>
		  <td>Cell 2</td>
		  <td>Cell 3</td>
		</tr>
		<tr>
		  <td>Cell 1</td>
		  <td>Cell 2</td>
		  <td>Cell 3</td>
		</tr>
	  </table>
	</div>

The main way of creating tables in Azure Wiki is Markdown table, and from what I found is that Markdown does not support color. Maybe there is any trick?

From Azure Wiki Syntax Help I found out that HTML tags and YAML tables are also supported, but everything that I was able to achieve is coloring via span tag inside markdown:

<span style="background-color: red">57065</span>|<span style="background-color: red">4560</span>|<span style="background-color: red">I AM TABLE ROW</span>

and that looks ugly.

enter image description here

Is there a way to achieve full-fledged coloring?


Solution

  • Try with inline styling. Here I made an example:

    <table style="border:ridge 4px red">
      <tr style="background-color:blue;color:white;" id="ROW1">
        <td style="border:ridge 4px red" >Cell 1.1</td>
        <td style="border:ridge 4px red">Cell 1.2</td>
        <td style="border:ridge 4px red">Cell 1.3</td>
      </tr>
      <tr style="background-color:yellow;color:green;" id="ROW2">
        <td style="border:ridge 4px red">Cell 2.1</td>
        <td style="border:ridge 4px red">Cell 2.2</td>
        <td style="border:ridge 4px red">Cell 2.3</td>
      </tr>
    </table>
    

    It looks like that in Azure DevOps Wiki:

    enter image description here

    I hope it will help you, but.. I strongly encourage to keep markdown simple. Please take a look at this stack discussion: Color in Markdown