Drawing a thick line below bases table header - last detail missing

Custom CSS & Theme Design
,
1

What I’m trying to do

Draw a thick line below the header of a bases’ result table.

Things I have tried

I created the following css-snippet.

.bases-table-header {
    border-bottom: solid 3px #ff4040;
}

bases_sc1
bases_sc1645×132 2.84 KB

As one can see, the thick line does not expand over the whole width of the column.

So I tried the following:

.bases-table-header,
.bases-table-header-sort,
.bases-table-header-resizer {
    border-bottom: solid 3px #ff4040;
}

bases_sc2
bases_sc2645×132 2.85 KB

If you look very closely, you can see that .bases-table-header-resizer works fine (the short line at the far right position), but the line defined by css class .bases-table-header-sort is slightly misplaced to the top and to the right.

I did some experiments in developer console with disabling css properties and the like, but didn’t find a solution. Can anyone give me a hint?

2

You could give this a try:

.bases-table-header,
.bases-table-header-resizer {
    border-bottom: solid 3px #ff4040;
}

.bases-table-header-sort {
    border-bottom: solid 3px #ff4040;
    top: 0px;
    padding-inline-start: 4px;
}

It doesn’t seem to break anything. :sweat_smile:

Obsidian_rMADDyFWLf

1 Like
3

I know I’m at war with the CSS box model.

Thank you very much, also in my vault your solution works perfect!

4

Meanwhile I found a simpler solution :wink:

.bases-thead .bases-tr {
	border-bottom: solid 3px #ff0000;
}

With this snippet the thick line expands over the whole width of the table, even if the last column does not (to solve this problem, I came up with this idea.).

5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.