Border-collapse no funciona de nuevo

Lo siento, sé que preguntas similares se han preguntado antes, pero ninguna de las sugerencias de ellos funcionó en mi caso. Tengo una tabla (para tabular los datos, no para el diseño), y no quiero fronteras para ser visible en el encabezado de la tabla. Hasta donde yo sé, la manera de hacerlo es especificar border-collaps: collapse; en el CSS. Sin embargo, las fronteras eran todavía visibles después de esto en mi caso. He buscado en este sitio, tratado de las diversas soluciones que se han propuesto aquí– border-spacing-0px, display-none –pero nada funcionó. Las fronteras están todavía allí. El código en mi CSS ahora este aspecto:

.tableStyle2 {
    border-spacing: 0px;
}

.tableStyle2 th {
    background-color: #1B7AE0;
    border-color: #1B7AE0;
    border-spacing: 0px;
}

.tableStyle2 tr {
    display: none;
}

y el correspondiente código HTML es el siguiente:

<table class = "tableStyle2" width = "100%">
<tr>
<th> ... </th>
<th> ... </th>
<th> ... </th>
<th> ... </th>
<th> ... </th>
</tr>
</table>

(El resto de la mesa aún no ha sido escrito.)
Alguna idea de lo que está causando esto, y ¿cómo es posible ocultar las fronteras entre las células en el encabezado de la tabla?

  • Post más actual de su código, o mejor aún, publicar un violín. He intentado un violín mediante el código que has mostrado, y no veo ninguna de las fronteras, por lo que debe haber algo escondido en los detalles.
  • El título de la pregunta es engañosa. El border-collapse propiedad no funciona, simplemente no hacer lo que incorrectamente se espera que hagan (quitar bordes).
InformationsquelleAutor Mhoram | 2013-08-06

1 Kommentar

  1. 7

    Cada uno de los <td>s determina (y es responsable de su propia frontera.

    .tableStyle2 {
        border-spacing: 0px;
        border-collapse:collapse;  /* <--- add this so all the internal <td>s share adjacent borders  */
        border:1px solid black;  /* <--- so the outside of the <th> don't get missed  */
    }
    
    .tableStyle2 th {
        background-color: #1B7AE0;
        border-color: #1B7AE0;
        border-spacing: 0px;  /* <---- won't really need this if you have border-collapse = collapse */
        border-style:none;   /* <--- add this for no borders in the <th>s  */
    }
    
    .tableStyle2 tr {
       /* display: none; <--- you want to show the table  */
    }
    • Gracias! He intentado esto, y por alguna razón ya no muestra el color de fondo, así que es difícil decir si hay fronteras más. Do <th>s determinar sus fronteras, como <td>s? Debo usar el <thead> etiqueta en lugar de <tr> en el encabezado de la tabla? Podría esto tener algo que ver con la frontera de colapso no funciona?
    • Finalmente llegué a la frontera a desaparecer! Puse «border-collapse: collapse;» bajo tableStyle2 y «border-style: none;» bajo tableStyle2 th. En otras palabras, no es fundamentalmente diferente de lo que has sugerido, y, aunque tengo la tabla para buscar la manera que yo quería, todavía no estoy seguro de por qué no funcionó el primer par de veces. Gracias, aunque.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea