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

Wannan tattunawa ta zama daɗaɗɗiya. Yi sabuwar tambaya idan ka na bukatar taimako.

html/css interpretation of sticky headers is different from Safari

  • 2 amsoshi
  • 1 yana da wannan matsala
  • 40 views
  • Amsa ta ƙarshe daga 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
Hoton allon fuska da aka liƙa

An gyara daga cor-el

Mafitar da aka zaɓa

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)

Karanta wannan amsa a matsayinta 👍 1

All Replies (2)

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

Zaɓi Mafita

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 Mai mallakar tambaya
more options

Thanks, cor-el. --Gil