Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.
SOLVED

How to add default style of table plugin of RTE

Avatar

Level 4

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@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.

BrianKasingli_1-1636693734647.png

// 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/

 

 

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

@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.

BrianKasingli_1-1636693734647.png

// 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/