How to add default style of table plugin of RTE | Community
Skip to main content
Level 3
November 11, 2021
Solved

How to add default style of table plugin of RTE

  • November 11, 2021
  • 2 replies
  • 950 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by BrianKasingli

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

 

 

2 replies

BrianKasingli
Community Advisor and Adobe Champion
BrianKasingliCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
November 12, 2021

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