I would greatly appreciate some help with this, if possible. I'm trying to add some global CSS styling to tables that are automatically generated by our company platform's HTML editor, but running into some problems.
Two things I'm trying to achieve:
- I'd like to add a thicker blue border to just the bottom of the first row designated as a header in the html. Example, to look something like this:
- The other element I'm trying to achieve is only in instances when the table has a header column and not a header row, to add a thicker blue border at the top of the first row Example of what I'm hoping to achieve:
Adding my current HTML and CSS code below:
table { overflow-x:auto; border-collapse: collapse; margin: 1.5rem 0 2.5rem 0; width: 100% !important; caption-side: bottom; border-color: transparent; } td { text-align: left; vertical-align: top; padding: 10px 12px !important; border-bottom: 0.1rem solid #8A959E; vertical-align: text-top; } td ul li { margin-bottom: 0 !important; } td ol li { margin-bottom: 0 !important; } td ul li::marker { font-size: 1.2rem !important; color: #2d3b45 !important; } td ol li::marker { font-size: 1rem !important; color: #2d3b45 !important; } th { border-bottom: 0.1rem solid #8A959E; padding: 16px 12px !important; vertical-align: text-top; text-align: left; font-weight: 800; } th[scope=col] { border-bottom: 0.1rem solid #2774ae; vertical-align: bottom; padding: 16px 16px 8px 16px !important; } th:first-child { border-bottom: 0.2rem solid #2774ae; } tbody tr:nth-child(even) { background-color: #f4f4f4; } th:first-child, td:first-child { padding-left: 1rem !important; } th:last-child, td:last-child { padding-right: 1.5rem !important; } caption { text-align: left; margin: 0.5rem 0; color: #595959; font-style: italic; padding: 0 15px !important; }<h1>Row Heading</h1><table><caption>caption</caption><tbody><tr><th scope="col">Row Heading</th><th scope="col">Row Heading</th><th scope="col">Row Heading</th></tr><tr><td>test content</td><td>test content</td><td>test content</td></tr><tr><td>test content</td><td>test content</td><td>test content</td></tr></tbody></table><h1>Column Heading</h1><table><caption>caption</caption><tbody><tr><th scope="row">Column Heading</th><td>test content</td><td>test content</td></tr><tr><th scope="row">Column Heading</th><td>test content</td><td>test content</td></tr><tr><th scope="row">Column Heading</th><td>test content</td><td>test content</td></tr></tbody></table>