Şu anda bakım nedeniyle sitemiz kısıtlı işlevsellik sunmaktadır. Mevcut makaleler sorununuzu çözmediyse ve bize soru sormak isterseniz Twitter’da @FirefoxSupport hesabından ve Reddit’teki /r/firefox subreddit'inden destek gönüllülerimize ulaşabilirsiniz.

Mozilla Destek’te Ara

Destek dolandırıcılığından kaçının. Mozilla sizden asla bir telefon numarasını aramanızı, mesaj göndermenizi veya kişisel bilgilerinizi paylaşmanızı istemez. Şüpheli durumları “Kötüye kullanım bildir” seçeneğini kullanarak bildirebilirsiniz.

Daha Fazlasını Öğren

html/css interpretation of sticky headers is different from Safari

  • 2 yanıt
  • 1 kişi bu sorunu yaşıyor
  • 1 gösterim
  • Son yanıtı yazan: 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
Ekli ekran görüntüleri

cor-el tarafından tarihinde düzenlendi

Seçilen çözüm

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
)

Bu yanıtı konu içinde okuyun 👍 1

Tüm Yanıtlar (2)

more options

Seçilen çözüm

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
)

more options

Thanks, cor-el. --Gil