html - tfoot - Espaciado de bordes doble con thead en Chrome y Safari

thead traductor

Question

Tengo una table que usa thead y tbody . La table tiene border-spacing conjunto de espacios entre border-spacing , y en Chrome y Safari, el espacio entre la fila del encabezado y el resto se duplica.

Se informó que fue un problema para Chrome a fines del año pasado, pero esa es la única referencia que puedo encontrar.

¿Alguien más ha tenido esto o sabe cómo evitarlo?

<table style="border-spacing: 0 5px">
<thead>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
</tbody>

Se muestra como se esperaba (todas las filas igualmente espaciadas) en Firefox, no estoy seguro acerca de IE.

Answer 1

thead th {position: relative; arriba: 5px;} lo hará

Answer 2

Esa no es exactamente la solución "THE", pero es posible que desee consultar aquí una solución que ha funcionado con mi caso específico:

¿Cómo eliminar el espacio extra entre los elementos de TBODY?