html/css interpretation of sticky headers is different from Safari
Hi--
Learning CSS, I have a test .html file that is interpreted one way in Firefox 76.0.1 and another way in Safari 13.1.1. (I prefer Safari's way.) Screenshots of renderings are attached. Both scroll (in a small window) the way I like.
Please help me understand what I can change so that both browsers render similarly.
Here is the file:
<!DOCTYPE html> <HTML> <HEAD> <TITLE>Table Scrolling Problem</TITLE> <style> table { border-collapse: collapse; } thead tr { position: sticky; top: 0; } th, td { border: 1px solid black; padding: 10px; } tr:nth-child(even) { background-color: #eee; } tr:nth-child(odd) { background-color: #fff; } </style> </HEAD> <BODY> <table> <thead> <tr> <th>Date</th> <th>Payee</th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td>5/5/55</td> <td>Frumtious</td> <td>$7.00</td> </tr> <tr> <td>5/5/55</td> <td>Frumtious</td> <td>$7.00</td> </tr> <tr> <td>5/5/55</td> <td>Frumtious</td> <td>$7.00</td> </tr> <tr> <td>5/5/55</td> <td>Frumtious</td> <td>$7.00</td> </tr> <tr> <td>5/5/55</td> <td>Frumtious</td> <td>$7.00</td> </tr> <tr> <td>5/5/55</td> <td>Frumtious</td> <td>$7.00</td> </tr> <tr> <td>5/5/55</td> <td>Frumtious</td> <td>$7.00</td> </tr> <tr> <td>5/5/55</td> <td>Frumtious</td> <td>$7.00</td> </tr> </tbody> </table> </BODY> </HTML>
--Gil
Novain'i cor-el t@
Vahaolana nofidina
Looks like this is a bug.
- Bug 1450584 - Border of sticky or relative positionned table elements remains attached to main table when border-collapse:collapse is set.
(please do not comment in bug reports
https://bugzilla.mozilla.org/page.cgi?id=etiquette.html)
All Replies (2)
Vahaolana Nofidina
Looks like this is a bug.
- Bug 1450584 - Border of sticky or relative positionned table elements remains attached to main table when border-collapse:collapse is set.
(please do not comment in bug reports
https://bugzilla.mozilla.org/page.cgi?id=etiquette.html)
Thanks, cor-el. --Gil