Join us and the lead editor of IRL, Mozilla's multi-award-winning podcast, for a behind-the-scenes look at the pod and to contribute your ideas for the next season, themed: "AI and ME." Mark your calendar and join our Community Call on Wednesday, Aug 7, 17:00–17:45 UTC. See you there!

Avatar for Username

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信，及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

话题已存档。 如果需要帮助请提出新问题。

html/css interpretation of sticky headers is different from Safari

  • 2 个回答
  • 1 人有此问题
  • 1 次查看
  • 最后回复者为 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
已附加屏幕截图

由cor-el于修改

被采纳的解决方案

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)

定位到答案原位置 👍 1

所有回复 (2)

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

选择的解决方案

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 提问者
more options

Thanks, cor-el. --Gil