css - tbody - thead bootstrap

Separación entre thead y tbody

Question

Tengo una tabla html simple como esta:

<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>

Y me gustaría estilizarlo de la siguiente manera:

• fila de encabezado con un cuadro de sombra
• espacios en blanco entre la fila del encabezado y la primera fila del cuerpo

He intentado cosas diferentes:

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;*/
}

Véase también: http://labcss.net/#8AVUF

¿Alguien tiene algún consejo sobre cómo podría hacer esto? ¿O lograr el mismo efecto visual (es decir, cuerpo-sombra + espaciado)?

Answer 1

Además, puedes usar Zero-Width Non-Joiner para minimizar el sinsedrix CSS:

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

Answer 2

Creo que lo tengo en este fiddle y actualicé el http://labcss.net/#8AVUF :

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

Answer 3

Entonces box-shadow no funciona bien en el elemento tr ... pero sí funciona en un elemento de pseudo contenido; sinsedrix me puso en el camino correcto y esto es con lo que terminé:

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;
}

Answer 4

Esto debería funcionar:

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
}

Y esto debería jugar bien con la mayoría de los navegadores.

Answer 5

Esto le dará un espacio en blanco entre el encabezado y el contenido de la tabla

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

Aunque configurar el color del borde es un poco un método engañoso, funcionará bien.

Para la investigación de formularios, no puede establecer box-shadow en una fila de la tabla, pero sí puede establecer celdas de la tabla:

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

(No estoy seguro de cómo quieres que se vea la sombra, así que solo ajusta lo anterior).

Answer 6

Esto me funcionó en Chrome (para otros navegadores, no lo sé).

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

Dicho código css crea un espacio en blanco vacío entre el thead y el cuerpo de la tabla. Si configuro el fondo como transparente, la primera columna de los elementos tr> th anteriores muestra su propio color (verde en mi caso) haciendo que aproximadamente el primer 1 cm del elemento :: after sea también verde.

También utilizando el signo "-" en el content : "-"; la fila content : "-"; en lugar de la cadena vacía "" puede crear problemas al exportar las páginas impresas a un archivo, es decir, pdf. Por supuesto, esto es parser / exportador dependiente. Dicho archivo exportado abierto con un editor de pdf (por ejemplo: Ms word, Ms Excel, OpenOffice, LibreOffice, Adobe Acrobat Pro) todavía podría contener el signo menos. La cadena vacía no tiene el mismo problema. No hay problemas en ambos casos si la tabla html impresa se exporta como imagen: no se representa nada.

No noté ningún problema, incluso usando

content : "/200C";