How to add default style of table plugin of RTE

[annkitaaggarwal]

Hi All,

I need default style to be added whenever author add table via table plugin in edit mode, like dotted border to differentiate from header type and such. Can you please help me on this.

Thanks

[Mayank_Tiwari]

This might help:

https://experienceleague.adobe.com/docs/experience-manager-65/administering/operations/configure-ric...

[BrianKasingli · Accepted solution]

@annkitaaggarwal,

You can achieve this by using custom CSS. Target the first tr HTML block element with table tr:first-child, and change the background color to something like grey. Example below is a screenshot of what the table styles will look like. At the bottom of this response, you will find some code snippets to how we can achieve your requirement. 

With this in mind, you can take this example idea, and target the first-child tr, and give it a dotted border.

// HTML
<table>
  <tr>
    <th>id</th>
    <th>name</th>
  </tr>
  <tr>
    <td>1</td>
    <td>classes</td>
  </tr>
  <tr>
    <td>2</td>
    <td>sync</td>
  </tr>
</table>



// CSS
table tr:first-child {
  background: grey;
}

table tr {
  display: block;
  border: 1px solid grey;
}

https://jsfiddle.net/vcdtoxen/