[#609]fix: adds border to last-child colspanned cells for better merged-cell styling

[haydencbarnes]

trafficstars

/* git issue - https://github.com/asciidoctor/asciidoctor-vscode/issues/609 If the last child cell was merged in the middle of three columns, then the middle cell of the three columns (but really last child cell) would not contain a right side border due to css "thinking" the cell was the most right cell and therefor be bordered by the frame element below this all. table.grid-cols>>tr>.tableblock[colspan]:last-child sets a 1-pixel wide right border for the last cell in each row with a colspan attribute. This is needed because table.grid-all>>tr>.tableblock:last-child removes the border from the last cell, but in the case of merged cells, the border is actually needed. Note: This may cause a small double border on the bottom most right cell of a colspanned row if it ends in the furthest right column. */

[haydencbarnes]

@ggrossetie looks like refactoring like in https://github.com/asciidoctor/asciidoctor-vscode/blob/fba9fb79e63c09a09e306e352ee294d8b94190d0/media/asciidoctor-default.css#L1402-L1440

actually might take care of everything we need, was there any reason the editor style targets the last child here when we could just have the border cover all the cells the same as shown in the default stylesheet?

table.grid-cols>*>tr>.tableblock:last-child {
  border-right-width: 0
}

I think the issue with my commit rn is that it may introduce a double border on the bottom most right cell of a colspanned row if it ends in the furthest right column.

[haydencbarnes]

Still wanting to make progress on this, will try refactor later this week

[ggrossetie]

@haydencbarnes I believe it's an impossible problem to solve using only CSS:

The default CSS does not handle rowspans. That's a limitation of having generic CSS. To fix it, I recommend adding a role to the table and customizing the CSS for that table. There's just no way that I can see that we could possibly address all the rowspan permutations. (The same goes for certain cases of colspans).

https://github.com/asciidoctor/asciidoctor/issues/3447

Otherwise, the only way to solve this problem is for the converter to add hints to the cells so we can detect when a cell extends into another column or row and touches the boundary of the table.

If we aren't using the latest version of asciidoctor.css you can try to upgrade to see if it improves things. Otherwise, and as mentioned by Dan, the only way to solve this problem is to add hints (i.e., CSS classes) to the cells.

[haydencbarnes]

@ggrossetie do you mean something like this - https://github.com/fomantic/Fomantic-UI/pull/1334 ?