Support » Plugin: TablePress - Tables in WordPress made easy » Rounded Corners & Bold Cell Text

  • Resolved Michael

    (@mdpalow)


    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)

    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:

    http://mhr.network/Untitled.png

    Plugin Author TobiasBg

    (@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 TobiasBg

    (@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 TobiasBg

    (@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.