tablas - th html

Problema de frontera de CSS con THEAD TBODY y COLSPAN

Question

Tengo un problema con la tabla css / html:
Cuando uso las etiquetasad y tbody con un atributo colspan, el borde inferior del encabezado se divide.
El tamaño del espacio depende del ancho del borde.

¿Tenía una solución para obtener un borde continuo en la parte inferior del encabezado (sin quitar thead y tbody )?

Ejemplo JSFiddle

table {
border-collapse: collapse;
}
th {
border: 4px solid red;
border-bottom: 4px solid black
}
td {
border: 4px solid blue;
}
thead tr {
border-bottom: 5px solid green
}

table {
border-collapse: collapse;
}
th {
border: 4px solid red;
border-bottom: 4px solid black
}
td {
border: 4px solid blue;
}
thead tr {
border-bottom: 5px solid green
}

with THEAD and TBODY but without COLSPAN
<table>
<thead>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</tbody>
</table>
<br /> COLSPAN with THEAD and TBODY <span style="background:yellow">(css bug in the middle of green border ?)</span>
<table>
<thead>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
Content 1 and 2 (merged cells)
</td>
</tr>
</tbody>
</table>
<br /> COLSPAN without THEAD and TBODY
<table>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
</tr>
<tr>
<td colspan="2">
Content 1 and 2 (merged cells)
</td>
</tr>
</table>

Answer 1

Puede tener una solución ilusoria cambiando los bordes de 4px / 5px a 1px. En cuanto a por qué estás recibiendo, debes tener que lidiar con las propiedades de thead y tbody, ya que el problema solo ocurre con su presencia.

Consulte: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead

Answer 2

La representación de esquina entre bordes colapsados ​​no parece estar bien especificada, por lo que no está claro que esto sea realmente un error en lugar de una variación en el comportamiento.

Encontré una solución horrible para Firefox, creando una pseudo segunda fila en el thead, y luego ocultándola, y también ocultando el borde superior de la primera fila de tbody como este:

thead:after {
content:'''';
display:table-row; /* see note below */
position:absolute;
visibility:hidden;
}
tbody tr:first-child td {
border-top-width:0;
}

_{(Tenga en cuenta que la display:table-row es solo para mostrar. En realidad, la position:absolute hace que se display:block el pseudo-elemento display:block independientemente de si la propiedad de visualización se establece en table-row o la izquierda en su inline predeterminada. El diseño de la tabla del contenedor hará que ese bloque se envuelva en objetos de tabla anónima de la tabla-fila y la celda-tabla para formar una tabla bien estructurada.}

table {
border-collapse: collapse;
}
th {
border: 4px solid red;
border-bottom: 4px solid black
}
td {
border: 4px solid blue;
}
thead tr {
border-bottom: 5px solid green
}
table ~ table thead:after {
content:'''';
position:absolute;
visibility:hidden;
}
table ~ table tbody tr:first-child td {
border-top-width:0;
}

with THEAD and TBODY but without COLSPAN
<table>
<thead>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</tbody>
</table>
<br /> COLSPAN with THEAD and TBODY <span style="background:yellow">(css bug in the middle of green border ?)</span>
<table>
<thead>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
Content 1 and 2 (merged cells)
</td>
</tr>
</tbody>
</table>
<br /> COLSPAN without THEAD and TBODY
<table>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
</tr>
<tr>
<td colspan="2">
Content 1 and 2 (merged cells)
</td>
</tr>
</table>