Shulou(Shulou.com)06/03 Report--

Blog link: https://blog.51cto.com/13969817

In the development and design, if you encounter changes to the table style in the website, we want to guide you not to make site-wide changes to the table format. The built-in table tools provide you with a wealth of modified colors, borders, headers, footers and so on.

But I personally think that different tables need to have different appearance in different scenes, in this case, you can redefine CSS for table body, table header, table row, flexibility is very important, this does not work in the modern experience, you must use a table in a classic web parts page, let me show you how to achieve it.

Now you will see a table displayed in a Page, which you can design with additional tags on the ribbon:

Design tabs to change some settings, such as different headers and footers or table styles, etc. The formatted text tab has all the basic text formatting tools, such as bold fonts or changing font colors. If you want to change the background of some boxes in the table, you can choose any style from the style drop-down menu in the Design tab, such as Light-banded style, so how can I achieve this if I want to use CSS?

Let's go to the Developer Tools page, let's change the ribbon color, let's use the pointer to identify the ribbon area, and you'll see a class: OddRow-1, let's define a rule to make its background pink.

Add the Rule under the Style tag, sample code:

.ms-rteTableOddRow-1 {

Background-color: pink! important

}

If this is your official rule, please copy the rule to the stylesheet and save it.

Go back to the site page, refresh, the changed rules still exist, and then we insert a table, select the previous table style: Light-banded, you will find that you have retained the previous settings.

Note: if you want to insert a table, or other content and enter the source code for processing, or modify CSS, then this change only applies to the classic Web part style page, the new style page does not have the ability to enter and edit HTML.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.