Changing table border color

ajdm73 

In SharePoint Online, there are multiple ways to change the appearance of table borders or other styles. While custom CSS is a common approach.

SharePoint Online allows you to inject custom CSS through the use of script editors or content editor web parts, and if you have access to the SharePoint site, you can apply these custom styles. Here’s a step-by-step guide to help you achieve this:

Step 1: Create the CSS

First, you need to create a CSS file that contains the style definitions for your table borders. Here’s an example of a simple CSS code to change the border color of a table:

/* Custom CSS for table border color */
.custom-table table, 
.custom-table th, 
.custom-table td {
    border: 2px solid #4CAF50; /* Change the color and thickness as needed */
}

Step 2: Upload the CSS to a Document Library

1. Upload CSS File:
• Go to your SharePoint site.
• Navigate to a document library where you want to store your CSS file (e.g., Site Assets).
• Upload the CSS file you created in the first step.

Step 3: Add the CSS to Your SharePoint Page

1. Edit the SharePoint Page:
• Navigate to the page where you want to apply the custom table styles.
• Click on the gear icon (settings) and select Edit Page.
2. Add a Script Editor or Content Editor Web Part:
• Click on the section of the page where you want to add the web part.
• Click on the + icon to add a web part.
• Select Embed from the web part options. This will allow you to add custom HTML or script content.
3. Add CSS Link to Web Part:
• In the Embed web part, click on Add embed code.
• Paste the following HTML code to link to your CSS file (make sure to adjust the URL to the path of your uploaded CSS file):

<link rel="stylesheet" type="text/css" href="https://yoursharepointsite.sharepoint.com/sites/yoursite/SiteAssets/customStyles.css">

1. Apply Custom Class to Your Table:
• Ensure that the table you want to style has the custom class applied. For example:

<table class="custom-table">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

Example:

If your table is part of a web part or a content area, ensure the table has the appropriate class to apply the styles.

<div class="custom-table">
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </table>
</div>

Step 4: Save and Publish

1. Save and Publish the Page:
• After adding the embed code, save and close the web part editor.
• Publish the page to make the changes live.

By following these steps, you can change the border color of tables in SharePoint Online using custom CSS. Ensure you have the necessary permissions to edit the page and upload files to the document library.

While custom CSS is a straightforward way to style table borders in SharePoint Online, you have several other options, including JSON formatting for columns, Power Apps for complex forms, SPFx for custom web parts, and modern page web parts for direct embedding.

NOTE: Since no one has answered it for at least one day or more, I entered your question in an AI (Otherwise it would have cost the author a lot of writing time). The text and the steps are the result of AI. The answers of an AI should be treated with caution, as they are not always correct. Maybe it will help you further in your project, if not please just ignore it.

My answers are voluntary and without guarantee!

Hope this will help you.

Was the answer useful? Mark as best response and Like it!

This will help all forum participants.