es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Problemas con los bordes de las tablas.

05 Aug, 2023 Programación

Tengo un problema extraño con mi tabla,
Normalmente quiero bordes alrededor de las cabeceras de mi tabla y las celdas de la tabla,
Pero por alguna razón solo me da un borde alrededor de toda la tabla.
¿Cómo puedo solucionarlo?

Imágenes y código adjunto

Así es como se ve

HTML:

<table width='100%'>
    <tr>
        <th>Maandag</th>
        <th>Dinsdag</th>
        <th>Woensdag</th>
        <th>Donderdag</th>
        <th>Vrijdag</th>
        <th>Zaterdag</th>
        <th>Zondag</th>
    </tr>

    <tr>
        <td>#</td>
        <td>#</td>
        <td>#</td>
        <td>#</td>
        <td>#</td>
        <td>#</td>
        <td>#</td>
    </tr>
</table>

CSS:

table, th, td {
    background-color: white;
    border: solid black 3px;
}
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para solucionar este problema, puedes agregar estilos CSS separados para las cabeceras de las tablas y las celdas de la tabla utilizando los selectores th y td, respectivamente. Modifica tu CSS de la siguiente manera:

    table {
    background-color: white;
    border: solid black 3px;
}
th {
    border: solid black 3px;
}
td {
    border: solid black 1px;
}

    Esto dará un borde más grueso a la tabla y a las cabeceras de la tabla que a las celdas de la tabla. Puedes ajustar el grosor del borde según sea necesario.

    Alternativamente, puedes usar la propiedad CSS border-collapse: separate para separar los bordes de las celdas y las cabeceras, así:

    table {
    background-color: white;
    border-collapse: separate;
    border-spacing: 0;
}
th, td {
    border: solid black 3px;
}

    Esto dará un borde separado tanto a las celdas de la tabla como a las cabeceras de la tabla.

Comments are closed.