Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
6
respuestas

Bordes redondeados a la tabla.

¿Cómo haría para hacer los bordes de la tabla? Traté de poner el borde al table, a cada elemento (pero solo se aplicaba al border del elemento, mas no a los border dibujados en "td,th"). Así que el solo se dibujaba el boder en la cabecera por el background. :/

6 respuestas
solución!

Hola, fijate si interpreté lo que necesitas.

en html:

<table>
    <thead>
        <tr>
            <th>Día</th>
            <th>Horario</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Lunes</td>
            <td>8h ~ 20h</td>
        </tr>
        <tr>
            <td>Miércoles</td>
            <td>8h ~ 20h</td>
        </tr>
        <tr class="ultima_fila">
            <td>Viernes</td>
            <td>8h ~ 20h</td>
        </tr>
    </tbody>
</table>

en style.css agregar:

th:first-child{
  border-top-left-radius: 7px;
}

th:nth-last-child(1){
  border-top-right-radius: 7px;
}

.ultima_fila td:first-child{
   border-bottom-left-radius: 7px;
}

.ultima_fila td:nth-last-child(1){
   border-bottom-right-radius: 7px;
}

Queda asi:

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad Saludos

El html tal cual...

El CSS lo tengo así:

table{
    margin: 35px 50px;
}
td, th{
    border: 1px solid;
    padding: 8px 15px;
}
thead{
    background-color: #C78C19;
}

th:first-child{
    border-top-left-radius: 7px;
}

th:nth-last-child(1){
    border-top-right-radius: 7px;
}

.ultima_fila td:first-child{
    border-bottom-left-radius: 7px;
}

.ultima_fila td:nth-last-child(1){
    border-bottom-right-radius: 7px;
}

y me queda así:

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad:C

Hola, me parece que ya detecté el problema

en tu reset.css esta definido lo siguiente al final:

table {
    border-collapse: collapse;
    border-spacing: 0;
}

si, borras el border-collapse, ya no se verá cuadrado y lo que si deberás darle el color al borde del th, td para que se vea el nuevo borde y si borras el border-spacing lo que hará es darte ese margen entre cada celda de la tabla.

Prueba y comenta.

Saludos

Esta vez me quedó así...

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadya casi... xd Lo logré con id, pero aún no sé por qué con

.ultima_fila td:first-child{
    border-bottom-left-radius: 7px;
}

.ultima_fila td:nth-last-child(1){
    border-bottom-right-radius: 7px;
}

no me sale... :(

te faltó la class: ultima_fila que yo definí en el html para que se puedan aplicar esos ultimos estilos

aca:

<tr class="ultima_fila">
            <td>Viernes</td>
            <td>8h ~ 20h</td>
        </tr>

Acabo de detectar por qué no me jalaba con eso... Lo había escrito así:

<tr class:="ultima_fila">
            <td>Viernes</td>
            <td>8h ~ 20h</td>
        </tr>

No me había percatado de los dos puntos. Jajaja Gracias!