web-dev-qa-db-fra.com

En-têtes de table adhésive CSS uniquement dans Chrome

J'ai l'extrait Sass suivant dans lequel je veux que le <thead> Flotte pendant le défilement du tableau. Cela fonctionne correctement dans Safari, mais pas dans Chrome Version 58.0.3029.110 (64-bit) _.

Je sais que Chrome a pris en charge de manière répétitive sticky et le prend actuellement en charge, mais est-il définitif? Est-ce un Chrome bug ou ai-je besoin d'une solution différente? (Je préfère l'approche CSS que Javascript, car elle est plus performante.)

.table {
  thead {
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
  }
}
cssgoogle-chromesass
37
Donnie

position: sticky ne fonctionne pas avec certains éléments de table (thead/tr) dans Chrome. Vous pouvez rester collant aux mots que vous devez être collants. Comme ça:

.table {
  thead tr:nth-child(1) th{
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
  }
}

Cela fonctionnera aussi.

.table {
    position: sticky;
    top: 0;
    z-index: 10;
}

Vous pouvez déplacer l'en-tête pour séparer la mise en page. Par exemple:

<table class="table">
    <thead>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    </thead>
</table>
<table>
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
60
Kirill Matrosov

Pour quelqu'un qui cherche encore une solution et qui n'est pas satisfait de la solution acceptée.

1) Utilisez la classe collante sur l'élément th.

2) avec sa propre classe

th.sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  /*To not have transparent background.
  background-color: white;*/
}
<table class="table">
  <thead>
    <tr>
      <th class="sticky-header">1</th>
      <th class="sticky-header">2</th>
      <th class="sticky-header">3</th>
      <th class="sticky-header">4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>
29
Tomsgu

https://jsfiddle.net/y9cwnb81/4/

div.table {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr auto;

  grid-template-areas:
    "header header header"
    "content content content";
}

.header {
  grid: 1fr/1fr;
}

.content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-area: content;
  height: 200px;
  overflow-y: scroll;
}

.content div {
  grid: auto-flow 1fr / repeat(auto-fill);
}

<!-- Here is the table code -->

<div class="table">
  <div class="header">Name</div>
  <div class="header">Color</div>
  <div class="header">Description</div>
  <div class="content">
    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd,mas, da,msnd asndm,asndm,asndbansbdansmbdmnasbd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>

    <div>Apple</div>
    <div>Red</div>
    <div>These are red asd.</div>
  </div>
</div>

Voici un exemple d'utilisation de CSS GRID pour avoir des en-têtes collants uniquement avec CSS, aucun javascript requis.

3
Danilo Castro

Vous définissez la position rémanente sur l'en-tête table-cellule au lieu de table-row.

.td.header {
  position: sticky;
  top:0px;
}

Regardez ceci jsfiddle pour un exemple simple.

0
CarCar