mirror of
https://github.com/BookStackApp/BookStack.git
synced 2026-02-07 19:06:05 +03:00
Table Cells not Responding to Custom Header CSS #1399
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @Anti-Distinctlyminty on GitHub (Oct 11, 2019).
Describe the bug
Placing custom style in the Custom HTML Head Content does not affect table cells (td).
Steps To Reproduce
Steps to reproduce the behavior:
<style> table, th, td {width: 100%; border-collapse: collapse; background-color: #f2f2f2; border-style: solid; border-color: #ffffff;} </style>Expected behavior
The specified CSS should produce a white border around all cells.
You can see from https://www.w3schools.com/css/tryit.asp?filename=trycss_table_border that the CSS is valid.
The desired effect can be done if I go to Cell > Cell Properties. But why does the table not respond to standard CSS formatting?
Your Configuration (please complete the following information):
Apologies here, but I did not set this up. I'm hunting down this information.
@cnfw commented on GitHub (Oct 11, 2019):
Adding the
!importantproperty to the border colour got this working for me.Seems like the ordering CSS is a little funny in that some of it is applied after the custom html head content.
eg:
border-color: #ffffff !important;@Anti-Distinctlyminty commented on GitHub (Oct 11, 2019):
@cw1998 Thanks for the workaround. That did indeed work. However, just to state the obvious, the CSS should work without hacks.
@ssddanbrown commented on GitHub (Oct 11, 2019):
The css is working as intended. CSS specificity is the key here.
Ordering is only one factor in determining the rules that override others. The default BookStack table cell rules are targeting
table tdwhich is more specific (Since it has two type selectors) that your own rule of justtd(One type selector). Therefore the custom border-color gets overridden. The!importantabove will effectively boost the specificity "score" so it overrides the default BookStack style. You can change your styles to the following to override BookStack as expected without!important:@Anti-Distinctlyminty commented on GitHub (Oct 11, 2019):
@ssddanbrown Thank you for the clarification. I think the issue here was a combination of my lack of CSS knowledge and the inability to see the default BookStack table cell rules. If it's not already documented then it may be worth adding some clarification to the Custom HTML Head Content section.
@ssddanbrown commented on GitHub (Oct 12, 2019):
Okay, I'm not sure how much clarification we can really add to that section though since there's so much that someone can do there. The default BookStack rules are can be seen via the browser devtools or by viewing the open code here in the repo.
Since this is now solved I'll close this off.