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

Cuireadh an snáithe seo sa chartlann. Cuir ceist nua má tá cabhair uait.

html/css interpretation of sticky headers is different from Safari

  • 2 fhreagra
  • 1 leis an bhfadhb seo
  • 1 view
  • Freagra is déanaí ó 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

Athraithe ag cor-el ar

Réiteach roghnaithe

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

Réiteach Roghnaithe

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 Úinéir na ceiste
more options

Thanks, cor-el. --Gil