Csswg-drafts: [css-tables] Collapsed table borders don't follow sticky rows/cells when they stick

[jan-tosovsky-cz]

Major browsers have implemented position:sticky for table headers in a way only cell are sticky, not collapsed borders, see https://jsfiddle.net/70vjwymx/ (header borders are transparent). I am not sure what should be fixed:

• my css (some additional settings)
• browser code
• specification
  I suppose position:sticky was implemented to ease styling cases like sticky table headers so I believe borders should be a part of that sticky content.

[jonjohnjohnson]

@jan-tosovsky-cz I've noticed similarly and don't think it's an issue with your css. The feature is quite underspecified, leaving browsers to implement and discover a lot. In css-position-3, it says "a stickily positioned box is positioned similarly to a relatively positioned box", which, being too simple a comparison, has caused confusion about stacking contexts and tables. Here, it's most likely piggybacking on the way that position: relative only adds the position scheme to a cells content box, leaving the collapsed borders "in flow".

There already are compatibility issues with rendering unique collapsed borders, which depend on document order, border-width, and the alpha channel of border-color, though I'm guessing you'd suggest that borders be "doubled up and stacked atop each other" visually?

[jan-tosovsky-cz]

@jonjohnjohnson thanks for explanation, that relative position influence on cell borders is weird in this context and undermines the original intent to have an elegant CSS way for making table headers sticky.

Yes, I expect copying the complete table header (cells + borders) and placing it on top of the original table. If this is out of scope of this spec, I'd be grateful for incorporating this common request into more appropriate spec.

[isat7]

working code: just add background-clip:padding-box;
`html{
padding: 0px;
margin: 0px;
}
body{
padding: 0px;
margin: 0px;
width:100%;
}

th,td{
padding:10px;
border: 0.1px solid #e8e0e0;
padding-right:10px;
}
th{
text-align: center;
background: #f3f3f3;
background-clip: padding-box;
}

thead th:first-child {
left: 0;
z-index: 1;
}
tbody th:first-child {
text-align: center;
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;

}
tbody th,thead th:first-child {
/* display:flex; /
/ text-align: center;
align-items: center;
align-self: center; */
width:30px;

min-width: 30px;
max-width: 30px;
word-break: break-all;

}
.fixed_header{
width: 100%;
/* height: 500px; /
table-layout: fixed;
border-collapse: collapse;
}
/ .fixed_header tbody{
overflow: auto;

} */

/* fixed header /
thead th {
/ for Safari */
text-align: center;
position: -webkit-sticky;
position: sticky;

top: 0;

}

.fixed_header th, .fixed_header td {
padding:10px;
/* text-align: left; */
width: 90px;
}

.fixed_header td{
/* padding:10px; /
/ word-break: break-all; /
/ max-width: 200px; /
}
.table_container{
/ position: fixed; */
position: relative;
width:100% ;
min-height: 500px;
overflow: auto;
background:cornsilk;
}

	Col 1	Col 2	Col 3	Col 4	Col 5	Col 1	Col 2	Col 3	Col 4	Col 5	Col 1	Col 2	Col 3	Col 4	Col 5	Col 1	Col 2	Col 3	Col 4	Col 5
1	row 1-1	row 1-2	row 1-3	row 1-4	row 1-1	row 1-2	row 1-3	row 1-4	row 1-1	row 1-2	row 1-3	row 1-4	row 1-1	row 1-2	row 1-3	row 1-4	row 1-1	row 1-2	row 1-3	row 1-4

  `

[tabatkins]

It would be great if this worked in a way that makes sense. Currently, the behavior you're seeing is working-as-intended; in the collapsed-borders model, the borders "belong to" the table, not the cells or rows. But it looks real bad, I agree. ^_^

So, this isn't really a Position issue, it's more an issue for Tables to possibly define a better model for collapsed borders that'll work with this. That's up in the air, so we'll leave this issue open, but we're not planning on addressing it in the Position spec at all.

[fantasai]

Not sure if "working-as-intended" is quite the right word here. It's "working-as-implemented", but the CSS2 spec wasn't particularly clear about how collapsed borders attach.