webentwicklung-frage-antwort-db.com.de

Warum ist der Rand bei "position: sticky" nicht sichtbar, wenn die Hintergrundfarbe vorhanden ist?

position: 'sticky' ist in Chrome 56 gelandet, macht aber den Rand unter bestimmten Umständen unsichtbar.

Betrachten Sie das folgende Beispiel:

table {
  border-collapse: collapse;
}

thead {
  position: sticky;
  top: 0;
}

th {
  background-color: #fff;
  border-right: 5px solid red;
}
<table>
  <thead>
    <tr>
      <th>First</th>
      <th>Second</th>
      <th>Third</th>
    </tr>
  </thead>
</table>

In Chrome 56.0.2924.76, nur das letzte <th>s Rand ist sichtbar, und dies ist nur, wenn <th> hat ein background-color angegeben.

Ist das ein Fehler in Chrome?

Spielplatz

31
Misha Moroshko

scheint zu erzwingen, dass ein Reflow teilweise hilft:

table {
  border-collapse: collapse;
}

thead {
  position: sticky;
  top: 0;
}

th {
  border-right: 5px solid red;
  transform:scale(0.999);
}
  <table>
    <thead>
      <tr>
        <th>First</th>
        <th>Second</th>
        <th>Third</th>
      </tr>
    </thead>
  </table>

background-clip scheint auch effizient und harmlos:

table {
  margin-top: 1em;
  border-collapse: collapse;
  margin-bottom: 200vh
}

thead {
  position: sticky;
  top: 0;
}

th {
  border-right: 5px solid red;
  background:white; 
  background-clip: padding-box;
}
  <table>
    <thead>
      <tr>
        <th>First</th>
        <th>Second</th>
        <th>Third</th>
      </tr>
    </thead>
  </table>
11
G-Cyr

Ich stand vor dem gleichen Problem. Mein Workaround war die Verwendung des :after Pseudoelement, um einen unteren Rand zu emulieren.

th:after{
    content:'';
    position:absolute;
    left: 0;
    bottom: 0;
    width:100%;
    border-bottom: 1px solid rgba(0,0,0,0.12);
}
50
Eric Guan

wenn die Tabelle einen Rand um die Spalten enthält und wir eine klebrige Position hinzufügen, müssen wir beim Scrollen der Tabelle einen überlappenden Effekt anzeigen, um diesen Effekt zu entfernen und den Rand beizubehalten, und statt des Randes einen Umriss hinzufügen

table tr th{
      outline: 1px solid #e9ecef;                
      border:none; 
      outline-offset: -1px;
    }
14
shahida

Ich habe mit Schatten gelöst

table tr th {
   position: -webkit-sticky;
   position: sticky;
   top: -1px;
   z-index: 2;
   background-color: white;
   -moz-box-shadow: 0 0 1px -1px #ccc;
   -webkit-box-shadow: 0 0 1px -1px #ccc;
   box-shadow: 0 0 1px -1px #ccc;
}
6
Project Mayhem

Das nächste Beispiel funktioniert derzeit gut unter Chrome (65) und Firefox (59).

Der SCSS-Code veranschaulicht die Beziehung zwischen Werten besser. Sie können die gewünschten Werte einstellen, indem Sie die Variablen ändern.

SCSS:

table {

    &.sticky-table-head {

        // Variables

        $border-width: 2px;

        $head-background-color: #ded;
        $head-border-color: #8a8;

        $background-color: #f8fff8;
        $border-color: #cdc;

        $color: #686;

        // Declarations

        margin-bottom: 1em;
        border-collapse: collapse;
        background-color: $background-color;
        color: $color;

        &:last-child {
            margin-bottom: 100vh;
        }

        th,
        td {
            border: $border-width solid $border-color;
        }

        thead {

            th {
                position: sticky;
                top: ($border-width / 2);
                background-color: $head-background-color;
                outline: $border-width solid $head-border-color;
                outline-offset: (- $border-width / 2);
            }
        }
    }
}

HTML und kompiliertes CSS:

table.sticky-table-head {
        margin-bottom: 1em;
        border-collapse: collapse;
        background-color: #f8fff8;
        color: #686;
}

table.sticky-table-head:last-child {
        margin-bottom: 100vh;
}

table.sticky-table-head th,
table.sticky-table-head td {
        border: 2px solid #cdc;
}

table.sticky-table-head thead th {
        position: -webkit-sticky;
        position: sticky;
        top: 1px;
        background-color: #ded;
        outline: 2px solid #8a8;
        outline-offset: -1px;
}
<div>
        <!-- First table -->
        <table class="sticky-table-head">
                <thead>
                        <tr>
                                <th>Lorem</th>
                                <th>Ipsum</th>
                                <th>Dolor sit amet</th>
                        </tr>
                </thead>
                <tbody>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                </tbody>
        </table>
        <!-- Second table -->
        <table class="sticky-table-head">
                <thead>
                        <tr>
                                <th>Lorem</th>
                                <th>Ipsum</th>
                                <th>Dolor sit amet</th>
                        </tr>
                </thead>
                <tbody>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                </tbody>
        </table>
</div>
2
Haász Sándor

Eine andere Möglichkeit besteht darin, Ihren Inhalt in ein Element zu packen und den Rahmen darauf zu setzen:

<th><div class="th-inner">your content</div><th>

.th-inner {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

Allerdings Ich fand, dass das Setzen des Rahmens auf dem th ohne border-collapse: collapse Auf dem Tisch funktioniert, also habe ich mich dafür entschieden.

0
Dominic
thead::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: #333333;
}

Ich habe das gleiche Problem mit einem Pseudoelement anstelle eines Rahmens behoben. Ich bin mir jedoch nicht sicher, warum dies überhaupt geschieht.

0
Alejandro

Ich verwende auf meiner Seite nur horizontale Rahmen, daher muss dies möglicherweise an Ihren speziellen Fall angepasst werden. Durch die Verwendung einer halbtransparenten Hintergrundfarbe für die Tabellenzellen habe ich festgestellt, dass das untere Ende des Hintergrunds den horizontalen Rand überlagert. Ich denke, es wird dasselbe mit dem rechten Ende für die vertikale Grenze sein. Um die Überlappung der Ränder zu vermeiden, habe ich einen linearen Verlauf festgelegt, der alles ausfüllt, aber das letzte Pixel spart. Leider funktioniert dies nur in Firefox und Chrome aber nicht in Edge.

td:first-child
{
    position: sticky;
    left: 0px;
    z-index: 2;
    background: linear-gradient(to bottom, white, white calc(100% - 1px), transparent calc(100% - 1px), transparent);
}

Rand zeichnet einen linearen Farbverlauf, der jedoch von oben weiß bis unten transparent ist, wobei die harte Änderung am Stopp bei 100% - 1px ignoriert wird.

0
ygoe