Requirement: I want to add custom table styles for rich text editor
Solution:
All the default styles are coming from "ms-rteTable" class...
So what i am going to do is, i will extend same class.
Ex: table.ms-rteTable-myNewStyle
Do below steps..
Step1.
table.ms-rteTable-myNewStyle
{
-ms-name:"My New Style";
}
.ms-rteTable-myNewStyle > tbody > tr > td, .ms-rteTable-myNewStyle > tbody > tr > th
{
border: 2px solid #0A2211;
}
.ms-rteTableHeaderRow-myCustomTable th
{
background:#FF0011;
}
Note: You can give your own styles...
-ms-name: will give the name of the styles..it will appear in the ribbon
Step2: I have added above css in master page. (You can save as css file and upload to sharepoint, then refer the css in master page)
Done..
How to test:
Go to any sharepoint page
Add Content Editor webpart
Insert table
highligt the table
go to Design tab in the ribbon
under table styles, you should see new style name as: "My New Style"
You can add more styles by copying the same css and rename "myNewStyle" to another name..and change -ms-name:"My New Style"; to -ms-name:"My New Style1";
