Pourquoi les styles de bordure ne fonctionnent-ils pas sur les en-têtes de tableau positionnés de manière collante et comment puis-je y remédier ?

Le style de bordure ne fonctionne pas avec les éléments de position collants

Le positionnement collant est une propriété CSS pratique qui permet aux éléments de rester fixes en place sur le l'écran, même lorsque l'utilisateur fait défiler la page. Cependant, des complications peuvent survenir lorsque vous essayez d'appliquer des styles de bordure à des éléments collants.

Le problème :

Dans l'exemple fourni, un en-tête de tableau est défini pour être Les styles de bordure collante et en ligne ont été appliqués au éléments. Cependant, les styles de bordure n'apparaissent pas lorsque le tableau défile, laissant l'en-tête sans style.

La cause :

Le conflit survient en raison de l'utilisation de border- effondrement : effondrement. Avec cette propriété, les bordures des cellules de tableau adjacentes s’effondrent et fusionnent. Lorsqu'elles sont combinées avec un en-tête collant, les bordures fusionnées sont perdues lors du défilement.

La solution :

Pour surmonter ce problème, vous pouvez utiliser border-collapse : séparé, ce qui évite l’effondrement des frontières. De plus, vous devez adapter vos bordures pour qu’elles se trouvent sur des côtés spécifiques des cellules et des en-têtes. Cela garantit que les bordures restent attachées et visibles même lors du défilement.

Solution CSS :

#wrapper {
  width: 100%;
  height: 150px;
  overflow: auto;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: separate; /* Don't collapse */
  border-spacing: 0;
}

table th {
  /* Apply both top and bottom borders to the <th> */
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table td {
  /* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table th:first-child,
table td:first-child {
  /* Apply a left border on the first <td> or <th> in a row */
  border-left: 2px solid;
}

table thead th {
  position: sticky;
  top: 0;
  background-color: #edecec;
}

En appliquant ces styles, les styles de bordure resteront visibles même lorsque le tableau défile, en préservant le design souhaité de l'en-tête collant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!