Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

haydencbarnes
Copy link
Contributor

@haydencbarnes haydencbarnes commented Feb 16, 2023

/* git issue - #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
Copy link
Contributor Author

@ggrossetie looks like refactoring like in

table.grid-all > * > tr > * {
border-width: 1px
}
table.grid-cols > * > tr > * {
border-width: 0 1px
}
table.grid-rows > * > tr > * {
border-width: 1px 0
}
table.frame-all {
border-width: 1px
}
table.frame-ends {
border-width: 1px 0
}
table.frame-sides {
border-width: 0 1px
}
table.frame-none > colgroup + * > :first-child > *, table.frame-sides > colgroup + * > :first-child > * {
border-top-width: 0
}
table.frame-none > :last-child > :last-child > *, table.frame-sides > :last-child > :last-child > * {
border-bottom-width: 0
}
table.frame-none > * > tr > :first-child, table.frame-ends > * > tr > :first-child {
border-left-width: 0
}
table.frame-none > * > tr > :last-child, table.frame-ends > * > tr > :last-child {
border-right-width: 0
}

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
Copy link
Contributor Author

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

@ggrossetie
Copy link
Member

ggrossetie commented Apr 3, 2023

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

asciidoctor/asciidoctor#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
Copy link
Contributor Author

@ggrossetie do you mean something like this - fomantic/Fomantic-UI#1334 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants