Rounded Corners & Bold Cell Text

Resolved Michael
(@mdpalow)

5 years, 11 months ago

Hi,

I used the following code found in your support to add rounded corners to a table in TablePress:

.tablepress thead th:first-child {
border-top-left-radius: 10px;
}
.tablepress thead th:last-child {
border-top-right-radius: 10px;
}
.tablepress tbody tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
.tablepress tbody tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}

However, I notice the th background color (blue in my case) is what’s being rounded and the default table border (border 1px solid #ccc) still shows square corners, which you can just barely see.

How can I hide the table border on the very top and bottom row corners? I’ve tried adding some css, but nothing has worked so far.

Also, I want to BOLD some text in several cells. My css code for bolding cell text is not working.

Can you please provide some CSS for both issues that I can use?

Thanks for your help,

Michael

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

Plugin Author TobiasBg
(@tobiasbg)

5 years, 11 months ago

Hi,

thanks for your question, and sorry for the trouble.

The (straight) border that you are still seeing might be a border on the table row or table itself, and not just the individual cells.

As for the CSS for bolding: Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Thread Starter Michael
(@mdpalow)

5 years, 11 months ago

The problem is on a localhost, but I took a screenshot and uploaded it to a server here:

http://mhr.network/Untitled.png

Plugin Author TobiasBg
(@tobiasbg)

5 years, 11 months ago

Hi,

just from a screenshot, I can not really find out where that border comes from 🙁

Maybe you could try removing borders, with CSS like https://tablepress.org/faq/remove-borders-from-a-table/

Regards,
Tobias

Thread Starter Michael
(@mdpalow)

5 years, 11 months ago

Hi Tobias,

I’m confused by your answer.

As I’ve come to learn, it seems your plugin strips any CSS from an upload. I only assume this because when I export the table and look at it in an HTML editor, I see no CSS at all.

So, when you say you cannot find where the border comes from, I think “where else could it come from?” If there is no CSS in the upload and nothing in the PLUGIN OPTIONS that has to do with a table border, where else could it be coming from?

Just in case I’m missing something, here’s everything that’s in my PLUGIN OPTIONS

.tablepress-id-1 .row-1 th {
background-color: #006699;
}

.tablepress-id-1 .row-1 th {
color: #ffffff;
}

.tablepress-id-1 .column-1 {
width: 150px;
}

.tablepress-id-1 .column-2 {
width: 150px;
}

.tablepress thead th:first-child {
border-top-left-radius: 10px;
}

.tablepress thead th:last-child {
border-top-right-radius: 10px;
}

.tablepress tbody tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}

.tablepress tbody tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}

It would seem your plugin is adding the border to the table … and … this code below did not resolve the issue:

.tablepress-id-1,
.tablepress-id-1 tr,
.tablepress-id-1 tbody td,
.tablepress-id-1 thead th,
.tablepress-id-1 tfoot th {
border: none;
}

Sorry if I’m missing something simple. 🙂

Thanks for any more help you can provide.

Plugin Author TobiasBg
(@tobiasbg)

5 years, 11 months ago

Hi,

correct, there’s no CSS in the imported data, but your theme ships with CSS code 🙂
And such CSS code can and will also affect tables that are created by TablePress.
So, in this case, I have strong reason to believe that your theme is actually adding this CSS code for the outer borders. To find out more, I would need to have access to the actual page, so that I can check it out using the Developer Tools in the browser (I recommend those from Google Chrome).

Regards,
Tobias

Thread Starter Michael
(@mdpalow)

5 years, 11 months ago

OK! Good answer. I get it.

I will get back to you with a link when I move it to a server for you to see.

Thank you.

Plugin Author TobiasBg
(@tobiasbg)

5 years, 11 months ago

Hi,

awesome! That would be great!

Best wishes,
Tobias

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

The topic ‘Rounded Corners & Bold Cell Text’ is closed to new replies.

Views