Position: sticky (firefox) on a table element
Firefox seems not to allow yet 'sticky' on table childs elements.
a workaround would be to set table as block, then thead, tbody, tfoot to display:table; so one of them can be sticked.
unfortunately this breaks the table-layout and split table into few tables .. :(
you also need to set coordonates where sticky comes in action http://codepen.io/gc-nomade/pen/reoExq . not the best :(
CSS base would be like:
table {
display: block;
}
thead {
position: sticky;
top: 0px; /* trigger sticky when reaches coordonates */
}
thead, tbody, tfoot {
display: table;
width: 100%;
}
table { background-color: rgba(241, 31, 0, 0.3); width: 100%; margin-top: 1em; position: static; display: block;}thead { display: table; width: 100%; background-color: rgba(241, 0, 241, 0.3); position: sticky; top: 0px; /* trigger sticky when reaches coordonates */}tbody { display: table; width: 100%;}th {} tbody td:nth-child(2) { height: 200px;}<table> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody></table><table> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody></table><table> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody></table><table> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody></table>Position sticky in table does not work in Firefox and Chrome 58
Like said here, Chrome still supports position sticky in table cells.
So a possible workaround is to point CSS to th instead of thead.
Please, see this sample: https://jsfiddle.net/owfmwdpm/
position: sticky not working in firefox
It sticks if you specify a top value:
.sticky{
position: -webkit-sticky; /* for safari */
position: sticky;
width: 200px;
float: left;
top: 10px;
}
fiddle
Position sticky broken in Firefox 57
Most of the browsers are not supporting this position: sticky attribute as mentioned it's an experimental API. Instead of that use position: fixed; for making it sticky.
Check here for browser compatibility.
Position sticky horizontal scrolling with display grid acting weird in Firefox and Safari
At last, I was able to fix the problem. The solution required some JS modifications.
The problem was that on Firefox and Safari the scrollWidth of the table element did not contain the width of the columns, which had position: sticky CSS rule.
In order to fix that, I introduced a ::before pseudo element to the table.
The style definition looks like this now:
table {
...
position: relative;
}
table::before {
position: absolute;
top: 0;
left: 0;
height: 100%;
z-index: -1;
}
I calculate the sum of all the columns' widths and apply that to the pseudo element.
After that, the scrollWidth is going to have the correct value on Firefox and Safari as well.
Unfortunately, there is no pure CSS solution for this problem. Luckily I had to measure the column widths anyway as I need them for the correct left and right values.
Position sticky works in Firefox, doesn't work in Chrome
Try applying position: sticky; to th instead of thead.
Example:
.table-wrapper {
border: 1px solid #ddd;
background-color: #fff;
position: relative;
> thead {
th{
background-color: #ddd;
z-index: 3;
position: sticky;
top: 0;
}
}
}
Related Topics
Sunburst Effect with CSS3 Gradient
Cursor:Pointer on Pseudo Element Ie
How to Use Commas in a CSS Variable Fallback
Chrome Dev Tools Rgba/Hsl Conversion to Some New Format
Gmail Responsive Email - Media Queries - Style Tag
How to Make CSS Sourcemapping Work in Chrome with Compass (Sass)
How to Detect Broken/Unloaded (Error) Images with CSS
How to Target CSS Class Names That Start with Digit
Css- Multiple Background Image
Animated CSS Underline on Delay
Css3 Transition ( Vendor Prefixes) Crashes Safari Immediately
Safari and Chrome Ignore Min-Width CSS Propery
Pure CSS: Center Tooltip Above Text on Hover Pt. 2
Jquery UI Tooltip Custom Class on Page Load
CSS Mystery: Width Being Set to 0Px Without Any CSS Rules
Managing CSS Flex-Box Growth in Multi-Line to Create a Grid of Equal Blocks