Border radius for alternating coloured rows

Resolved tas888
(@tas888)

4 years, 10 months ago

Hi Tobias,

The plugin is great! I just have one query;

I used the following CSS to create rounded corners on the header row, but only on the outer corners, not the inner corners;

.tablepress-id-3 .row-1 .column-1 {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}

.tablepress-id-3 .row-1 .column-2 {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

Is there a way to do the same for the rows with colour background? (the red rows in the URL)

Thanks in advance!

The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Author TobiasBg
(@tobiasbg)

4 years, 10 months ago

Hi,

thanks for your post, and sorry for the trouble.

Round corners in HTML tables can be tricky, usually you will need a bit of CSS code. Unfortunately, I couldn’t check your site, as it’s only presenting me a “Launching Autumn 2019” message (after a redirect to the main page).

Regards,
Tobias

Thread Starter tas888
(@tas888)

4 years, 10 months ago

Apologies for the redirect, you should be able to view the table I have created here: http://www.drivous.com/wp-content/uploads/2019/06/Screen-Shot-2019-06-16-at-11.49.01.png
Plugin Author TobiasBg
(@tobiasbg)

4 years, 10 months ago
Hi,

ah, thanks, now I understand. These red rows should be the odd or even rows, so that you could try with those CSS selectors:
```
.tablepress-id-3 .odd td {
```
or
```
.tablepress-id-3 .even td {
```
Regards,
Tobias
Thread Starter tas888
(@tas888)

4 years, 10 months ago

Thanks, I updated the plugin with the code below:

.tablepress-id-3 .odd td {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

Now I have this result: http://www.drivous.com/wp-content/uploads/2019/06/Screen-Shot-2019-06-16-at-18.23.45.png

Is there a way to stop the radius (rounded corners) being applied in the middle of the table?

Plugin Author TobiasBg
(@tobiasbg)

4 years, 10 months ago

Hi,

ah, my bad, my example was not precise enough. You should basically use your code from above, but with .odd instead of .row-1.

Regards,
Tobias

Thread Starter tas888
(@tas888)

4 years, 10 months ago

That works perfectly, thanks!

Plugin Author TobiasBg
(@tobiasbg)

4 years, 10 months ago

Hi,

no problem, you are very welcome! 🙂 Good to hear that this helped!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Border radius for alternating coloured rows’ is closed to new replies.