2
votes

grille css comment ajouter une ligne entre les lignes?

Je crée un tableau en utilisant une grille css. Je ne peux pas ajouter de ligne de bordure aux lignes. Il y a un espace entre les colonnes. Cela devrait ressembler à l'image

Voici ce que j'ai obtenu lorsque j'ajoute une bordure en bas aux cellules:

const TableWrapperUI = styled.div`
  display: grid;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #dbeaf4;
  grid-template-columns: repeat(
    ${props => props.columns && props.columns},
    fit-content(400px)
  );
  justify-items: center;
  padding: 5px;
  justify-content: space-between;
  > span {
    justify-self: left;
    border-bottom: 1px solid red;
  }
`;

Vous pouvez vérifier ici: https://codesandbox.io/s/goofy-easley-w5rrg

reactjs html css css-grid html-table

3 commentaires

Je suppose qu'il n'est pas possible de styliser la ligne / colonne de la grille, bien que vous puissiez envelopper vos étendues dans, disons, divs et les étirer pour occuper toute la largeur de la cellule: > div {width: 100%; affichage: flex; &> span {justify-content: left; }}

voici également un tas d'idées stackoverflow.com/questions/46308048/...

@EvgenyTimoshenko encore un écart entre les colonnes

3 Réponses :

0
votes

Ok, voici une petite astuce. Ça a l'air un peu loufoque, mais ça marche.

const TableWrapperUI = styled.div
  display: grid;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #ff0000;
  grid-template-columns: repeat(
    ${props => props.columns && props.columns},
    fit-content(400px)
  );
  justify-items: center;
  padding: 5px 5px 5px 0;
  overflow: hidden;
  justify-content: space-between;
  > span {
    justify-self: left;
    border-bottom: 1px solid #d1d1d1;
    width:150%;
    text-align: left;
    padding: 10px;
    box-sizing: border-box;
  }
;

DEMO a>

Si vous utilisez la disposition des écrans larges, augmentez simplement de 150% à 300% ou quelque chose comme ça.

1 commentaires

Cela aide à combler les lacunes entre les colonnes. Ça a l'air étrange, mais ça marche. De plus, le div parent doit être overflow: hidden;

2
votes

Si vous souhaitez avoir des lignes de séparation entre les lignes, essayez l'approche suivante.

Donnez à la grille une couleur d'arrière-plan.
Donnez grid-row-gap: 1px (dépend de l'épaisseur requise)
Donner un fond blanc à chaque enfant de la grille

const TableWrapperUI = styled.div`
  display: grid;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #dbeaf4;
  grid-template-columns: repeat(
    ${props => props.columns && props.columns},
    fit-content(400px)
  );
  padding: 5px;
  background-color: #eaeaea;  // step 1
  grid-row-gap: 1px;  // step 2

  > span {
    display: block;
    background-color: #ffffff; // step 3
  }
`;

0 commentaires

0
votes

Si vous souhaitez conserver l'espace entre les éléments, vous pouvez ajouter un élément vide entre chaque ligne et l'étirer sur toute la largeur du conteneur (en utilisant la propriété grid-column ) puis ajouter une bordure

Vous pouvez voir l'exemple ici:

<div class="container">
  <div>col 1 of row 1</div>
  <div>col 2 of row 1</div>
  <div>col 3 of row 1</div>
  <div>col 4 of row 1</div>
  
  <div class="row-border"></div>

  <div>col 1 of row 2</div>
  <div>col 2 of row 2</div>
  <div>col 3 of row 2</div>
  <div>col 4 of row 2</div>

  <div class="row-border"></div>

  <div>col 1 of row 3</div>
  <div>col 2 of row 3</div>
  <div>col 3 of row 3</div>
  <div>col 4 of row 3</div>

  <div class="row-border"></div>

  <div>col 1 of row 4</div>
  <div>col 2 of row 4</div>
  <div>col 3 of row 4</div>
  <div>col 4 of row 4</div>
</div>

.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
}

.row-border{
    border-top: 2px solid gray;
    grid-column: 1 / 5; /* this code makes the row stretch to entire width of the container */
}

0 commentaires