Entrar Ainda não tem acesso?
2
respostas

Arredondando os quatro cantos da tabela.

Referente ao curso HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas, no capítulo Estrutura de tabelas e atividade Estilos na tabela

por João Vitor Esposte Campos
| 17.5k xp | 1 posts

Olá, estou aplicando os conhecimentos passados no curso em um site fictício, porém, ao exercitar a tag

no sublime text 3, mesmo colocando no CSS para ela ter bordas arredondadas, o comportamento não fica exatamente como o esperado. 
`.tabela-horario {
text-align: center;
margin: 40px auto;
font-size: 1.25em;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;

}

.tabela-horario thead { background: blue; color: lightblue; }

.tabela-horario th, .tabela-horario td { border: 1px solid black; padding: 0.4em; }`

O resultado acaba sendo este aqui: 

![](![Tabela sem nenhuma borda arredondada](https://cdn1.gnarususercontent.com.br/1/942427/baac8f9d-2c40-45ec-afa0-9952e4603753.png)  )

O que eu estou fazendo errado?
2 respostas
por Germanna De Fatima Oliveira De Lima
| 309.2k xp | 307 posts

Oi João, tudo bem? O CSS não possibilita fazer arredondamento em borda de tabela. Infelizmente. Tanto o html como o css são meio limitados com tabelas. Se não me engano, tem uma forma de fazer, mas o resultado não fica tão legal. Você não altera a borda da tabela, mas o o fundo que fica ao redor da tabela para cobrir os cantos.

.tabela-horario tr td { margin-left: 40px auto; font-size: 1.25em; text-align: center; } .tabela-horario tr:last-child td:last-child{ border-bottom-right-radius: 20px; }

.tabela-horario tr:last-child td:first-child{ border-bottom-left-radius: 20px; }

Me fala se deu certo. Espero ter ajudado

por Renato Silveira Nunes
| 88.4k xp | 110 posts
Analista programador pleno

Olá João.

A tabela não é um elemento fácil para trabalhar com arredondamento, mas tem como fazer.

Adicionando overflow no seu código a borda arredondada aparece:

.tabela-horario {
        text-align: center;
        margin: 40px auto;
        font-size: 1.25em;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 30px;
        overflow: hidden;
}

Porém os elementos dos cantos que estão com borda precisarão de ajustes, a adição de border-radius também, exemplo da th no canto superior esquerdo:

.rounded-tl{
    border-top-left-radius: 23px;
}

Outra maneira é usar uma div como container da table:

CSS

A table tem que ter a mesma largura da div.

.rounded{
    border-radius: 30px;
    overflow: hidden;
}
table{
    width: 100%;
}

HTML

<div class='rounded'>
    <table>
    ...
    </table>
</div>

Abraço.