Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

html/css interpretation of sticky headers is different from Safari

  • 2 replies
  • 1 has this problem
  • 38 views
  • Last reply by Gil Dawson

Gil Dawson
Gil Dawson
more options

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
Attached screenshots

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)

Read this answer in context 👍 1

All Replies (2)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

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)

Gil Dawson
Gil Dawson Question owner
more options

Thanks, cor-el. --Gil