Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How to add default style of table plugin of RTE

annkitaaggarwal
Level 2
Level 2

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
BrianKasingli
Correct answer by
Community Advisor
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
BrianKasingli
Correct answer by
Community Advisor
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