Style bug when merging cells

  • Resolved Guyinpv

    (@guyinpv)


    5 years, 3 months ago

    Simple issue here. When you merge cells, the HTML output still contains extra <td> tags marked with attributes to keep them hidden.
    When using borders, the default styles make use of the :first-child and :last-child CSS selectors.

    This selector is broken with merged cells because it targets the <td> which is visually hidden. So the border style does not get set.
    Or to put another way, the right-border of the merged cell will disappear because last-child is targeting a <td> which can’t be seen.

    Here is a screenshot: https://www.dropbox.com/s/a8m0f1dybws98bu/cell%20styles.jpg?dl=0

    You can see the right border is missing, again because the <td> actually exists in the source code, but is visually hidden, so the border doesn’t show up. If I delete the <td>, the border shows up fine.

    So the real question is, when cells are merged, why does it still output the ghost <td> that shouldn’t even be there?

    Frankly, I don’t know how to target a merged cell like this to make the border show up, but only when it is against the right edge of the table.
    Sometimes I might have merged cells within the table that don’t touch the outer border. I’m not sure I can fix this with just CSS, so that’s why I’m reporting it. Something has to be done with targeting the merged cell right border when it’s against the right edge of the table, or stop outputting ghost <td>s when the sibling has a colspan.

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author wpDataTables

    (@wpdatatables)

    5 years, 3 months ago

    Hi guyinpv,

    Thank you for reporting this.

    Yes, there is an issue with merge cells that are connected to the right edge of the table and when it is used global settings for outer borders.

    It will be forward to the developers to check out some solutions for this issue in one of the next updates.

    Yes, the hidden cells are still there because they are necessary for the functionality of the Basic Responsive option.

    What you can do is target only those merge cells that are connected to the right edge of the table with the data cell id attribute that has each cell in a table. This id can be for example A1 which represent cell coordinates in the table(“A” is the name of the column header and “1” is the number of the row)

    You can find it for each cell throw Inspect element of the browser https://ibb.co/MBNjKs0

    and then use it in the Custom CSS field in Plugin settings like this

    .wpdt-c table.wpdtSimpleTable tr td[data-cell-id="A1"]{
border-right-color: red !important;
}

    or for a specific table only like this

    #wpdtSimpleTable-1 tr td[data-cell-id="A1"]{
border-right-color: red !important;
}

    Where 1 is the id of the table and you will replace it with an id of your table.

    We use ‘red’ as a color, you will replace it with your color.

    Sorry for inconviniance,

    Best regards.

    • This reply was modified 5 years, 3 months ago by wpDataTables.
    Thread Starter Guyinpv

    (@guyinpv)

    5 years, 3 months ago

    Thanks. I’ll have to target them specifically one by one then.

    This happens on most tables though, because I usually merge the last row into a type of footer. Your settings allow for the top row to become a header but it doesn’t allow the bottom row to be a tfoot footer.

    Anyway, I look forward to an update to fix it. And perhaps in the near future some controls for a tfoot section.

    Thanks!

    Plugin Author wpDataTables

    (@wpdatatables)

    5 years, 3 months ago

    Hi guyinpv,

    You are welcome.

    Thank you for your suggestion. I will forward your request to our developer’s team.

    It is already a prepared update that will be launched very soon, so fix for this I can guess will be then in one of the updates after this one.

    Thank you for understanding.

    Best regards.

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

The topic ‘Style bug when merging cells’ is closed to new replies.