Styling tables with CSS

Hi there,

Thank you so much for the kind words! We are thrilled to hear that you are enjoying the plugin.

Yes, it is absolutely possible to style the table exactly the way you want using a little bit of custom CSS.

Below are the CSS snippets you need. Important Note: In the codes below, we have used 1451 as an example Table ID (.stwt-table-id-1451). Please replace 1451 with your actual Table ID so that the design applies to your specific table without affecting other tables on your site. You can easily find your Table ID inside the shortcode you generated (e.g., [STWT_Sheet_Table id="1451"]).

#1. Create Vertical Lines (Column Borders)

To add a solid vertical line between your columns, you can use the following CSS. You can change #555B61 to any color code you prefer.

css
/* Adds a vertical border to the right of each column */

.stwt-table-wrapper.stwt-table-id-1451 table.sheet-to-wp-table th, 
.stwt-table-wrapper.stwt-table-id-1451 table.sheet-to-wp-table td {
    border-right: 1px solid #555B61 !important;
}

#2. Set Background Color of Certain Rows

To highlight or change the background color of specific rows, you can use the nth-child CSS selector. For example, if you want to change the background color of the 6th row, use this code:

css

/* Changes the background color of the 6th row */

.stwt-table-wrapper.stwt-table-id-1451 table.sheet-to-wp-table tbody tr:nth-child(6) td {
    background-color: #FF0000 !important;
}

(Tip: Simply change the number (6) to whichever row number you want to target. You can also duplicate this code to target multiple different rows!).

Bonus: Change the Table Header Background Color If you also want to apply a specific background color to the entire top header row, you can use this snippet:

css

/* Changes the background color of the Table Header */

.stwt-table-wrapper.stwt-table-id-1451 table.sheet-to-wp-table thead th {
    background-color: #FF0000 !important;
}

Where to add this CSS? Simply log in to your WordPress dashboard, navigate to Appearance > Customize > Additional CSS, paste the codes there, and hit Publish.

Please give it a try and let us know if you need any further assistance. We are always here to help!

Best regards, Support Team

Hi @gcspoon,

Thank you for reaching out!

You can easily set the number of rows to display per page and make sure pagination is enabled by following these simple steps:

1. Go to Sheet to Table > All Tables from your WordPress dashboard.
2. Locate the table connected to your Google Sheet and click Edit.
3. Click on the Table Customization tab.
4. Under the Layout section, ensure the Show pagination checkbox is enabled (under Table bottom elements).
5. Next, click on Styling from the left side menu.
6. Set the Rows to show per page option to 50 (or your preferred number).
7. Click Save Changes.

Please let us know if you need any further assistance!

Best regards,
Nazmul
Support Team