TablePress: Background color not applied to entire rowspan cell

  • Resolved yomomoyo

    (@yomomoyo)


    1 week, 3 days ago

    Hello,

    I’m using TablePress on WordPress and I’m trying to create a cell with a #rowspan# that has a specific background color.

    The #rowspan# itself works correctly, but the style (background-color) is applied only to the first (top) cell of the #rowspan#, not to the entire merged area.

    Here is what I’ve tried :

    -in In the top cell:

    <span class="atelier-important">Atelier A</span>

    or 

    <div class="atelier-important">Atelier A</div>

    -in the cells below: 

    #rowspan#

    -in the css:

    .atelier-important {
    background-color: #ffeb3b;
    display: block;
    height: 100%;
    width: 100%;
    padding: 6px;
    }

    And my result is:

    • the #rowspan# is correctly applied
    • but the background color only appears in the top cell, not across all rows covered by the #rowspan#

    Thanks in advance for your help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    1 week, 2 days ago

    Hi!

    Thanks for your post and sorry for the trouble!

    Can you please send me a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Now, with this approach of adding a <div> or <span>, you are only applying the background color to that element. I assume that this simply doesn’t have the full 100% height of the cell, which you could investigate with the browser’s Developer Tools.

    Best wishes,
    Tobias

    Thread Starter yomomoyo

    (@yomomoyo)

    1 week, 2 days ago

    Hi Tobias
    Thanks a lot for your quick response and of course for this incredibly useful plugin.

    Here is a link to my table.

    I have added an example of the problem in cells B1, B2, B3 and B4. (where “BlaBlaBla”)

    Sorry, I don’t have much experience with the browser’s Developer Tools you’re referring to.

    Thanks

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    1 week, 2 days ago

    Hi,

    Thanks for the link!

    Indeed, the problem is that the <div> does not have 100% height of the table cell. Unfortunately, this is very difficult to achieve, so it might be easier to use a different CSS structure:

    .tablepress td:has(> .plenary) {
        background-color: #0c9;
    }

    This will basically assign the background color directly to the cell, if it has an immediate child with the .plenary CSS class.

    Regards,
    Tobias

    Thread Starter yomomoyo

    (@yomomoyo)

    1 week, 1 day ago

    Hi,

    A huge thank you for your very detailed response! it was incredibly helpful! I can now work on the borders and fonts.
    I also want to thank you for your plugin which allows me to create this timetable that I couldn’t achieve with other dedicated plugins, often limited to 15-minute slots while I need some as short as 5 minutes.
    Yours is much more flexible and perfectly suited to my needs.

    Best regards

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    1 week, 1 day ago

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!
    And thanks for the nice review, I really appreciate it!

    Best wishes,
    Tobias

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

You must be logged in to reply to this topic.