web-dev-qa-db-fra.com

Espacement entre tête et corps

J'ai un tableau html simple comme ceci:

<table>
  <thead>
    <tr><th>Column 1</th><th>Column 2</th></tr>
  </thead>
  <tbody>
    <tr class="odd first-row"><td>Value 1</td><td>Value 2</td></tr>
    <tr class="even"><td>Value 3</td><td>Value 4</td></tr>
    <tr class="odd"><td>Value 5</td><td>Value 6</td></tr>
    <tr class="even last-row"><td>Value 7</td><td>Value 8</td></tr>
  </tbody>
</table>

Et je voudrais le styler de la manière suivante:

  • ligne d'en-tête avec une ombre
  • espace entre la ligne d'en-tête et la première ligne de corps

Box Shadow on Header + Spacing to Body

J'ai essayé différentes choses:

table {
    /* collapsed, because the bottom shadow on thead tr is hidden otherwise */
    border-collapse: collapse;
}
/* Shadow on the header row*/
thead tr   { box-shadow: 0 1px 10px #000000; }
/* Background colors defined on table cells */
th         { background-color: #ccc; }
tr.even td { background-color: yellow; }
tr.odd td  { background-color: orange; }

/* I would like spacing between thead tr and tr.first-row */

tr.first-row {
    /* This doesn't work because of border-collapse */
    /*border-top: 2em solid white;*/
}

tr.first-row td {
    /* This doesn't work because of border-collapse */
    /*border-top: 2em solid white;*/
    /* This doesn't work because of the td background-color */
    /*padding-top: 2em;*/
    /* Margin is not a valid property on table cells */
    /*margin-top: 2em;*/
}

Voir aussi: http://labcss.net/#8AVUF

Quelqu'un at-il des conseils sur la façon dont je pourrais faire cela? Ou obtenir le même effet visuel (c'est-à-dire bod-shadow + spacing)?

csshtml-tablespacing
52
Ben

Je pense l'avoir dans ce violon et j'ai mis à jour le vôtre :

tbody:before {
    content: "-";
    display: block;
    line-height: 1em;
    color: transparent;
}
116
sinsedrix

De plus, vous pouvez utiliser Zero-Width Non-Joiner pour minimiser sinsedrix CSS:

tbody:before {line-height:1em; content:"\200C"; display:block;}
20
user2718944

Cela vous donnera un espace blanc entre l'en-tête et le contenu de la table 

thead tr {
  border-bottom: 10px solid white;
}

Bien que définir la couleur de la bordure soit un peu une méthode de triche, cela fonctionnera bien.

Enquête de formulaire, vous ne pouvez pas définir d’ombre-boîte sur une ligne de tableau, mais vous pouvez également placer des cellules dans un tableau:

th {
  box-shadow: 5px 5px 5px 0px #000000 ;
}

(Je ne sais pas comment vous voulez que l'ombre ressemble, ajustez simplement ce qui précède.)

9
ACarter

Donc box-shadow ne fonctionne pas bien sur l'élément tr ... mais cela fonctionne sur un pseudo élément de contenu; Sinsedrix m'a mis sur la bonne voie et voici ce que j'ai fini avec: 

table {
    position: relative;
}

td,th {padding: .5em 1em;}

tr.even td { background-color: yellow; }
tr.odd td  { background-color: orange; }

thead th:first-child:before {
    content: "-";

    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;

    box-shadow: 0 1px 10px #000000;
    padding: .75em 0;

    background-color: #ccc;
    color: #ccc;
}

thead th {
    padding-bottom: 2em;
}
6
Ben

Cela a fonctionné pour moi sur Chrome (pour les autres navigateurs que je ne connais pas).

.theTargethead::after
{
    content: "";
    display: block;
    height: 1.5em;
    width: 100%;
    background: white;
}

Un tel code css crée un espace blanc vide entre le thead et le tbody de la table . Si je mets le fond à transparent, la première colonne des éléments tr> th précédents montre sa propre couleur (le vert dans mon cas) rendant sur les premiers 1 cm de l'élément :: after vert aussi.

Le fait d’utiliser également le signe "-" dans la ligne content : "-"; au lieu de la chaîne vide "" peut créer des problèmes lors de l’exportation des pages imprimées dans un fichier, par exemple, pdf. Bien sûr, cela dépend de l'analyseur/exportateur . Ce fichier exporté ouvert avec un éditeur PDF (par exemple: MS Word, Excel, OpenOffice, LibreOffice, Adobe Acrobat Pro) pourrait toujours contenir le signe moins. La chaîne vide n'a pas le même problème . Aucun problème dans les deux cas si la table HTML imprimée est exportée en tant qu'image: rien n'est rendu.

Je n'ai pas remarqué de problème, même en utilisant 

content : "\200C";
4
willy wonka

Cela devrait faire l'affaire:

table {
  position: relative;
}
thead th { 
  // your box shadow here
}
tbody td {
  position: relative;
  top: 2rem; // or whatever space you want between the thead th and tbody td
}

Et cela devrait jouer bien avec la plupart des navigateurs. 

0
David Gaskin