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
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:
<pre><nowiki><!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></nowiki></pre>
--Gil
Modified by cor-el
Chosen solution
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)
Chosen Solution
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