Rounded Corners & Bold Cell Text

  • Resolved Michael

    (@mdpalow)


    7 years, 5 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 Tobias B?thge

    (@tobiasbg)

    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)

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

    https://mhr.network/Untitled.png

    Plugin Author Tobias B?thge

    (@tobiasbg)

    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)

    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 Tobias B?thge

    (@tobiasbg)

    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)

    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 Tobias B?thge

    (@tobiasbg)

    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.