Propriedade border-radius do CSS3 e border-collapse: collapse não se misturam. Como posso usar o raio da borda para criar uma tabela recolhida com cantos arredondados?

317

Edit - Título original: Existe uma forma alternativa para alcançar border-collapse:collapseno CSS(a fim de ter, uma mesa de canto arredondado desmoronou)?

Como acontece que o simples recolhimento das bordas da tabela não resolve o problema raiz, atualizei o título para refletir melhor a discussão.

Estou tentando fazer uma tabela com cantos arredondados usando a CSS3 border-radiuspropriedade Os estilos de tabela que estou usando são mais ou menos assim:

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

Aqui está o problema. Também quero definir a border-collapse:collapsepropriedade e, quando isso estiver definido, border-radiusnão funcionará mais. Existe uma maneira baseada em CSS em que eu possa obter o mesmo efeito que border-collapse:collapsesem realmente usá-lo?

Editar% s:

Criei uma página simples para demonstrar o problema aqui (apenas Firefox / Safari).

Parece que grande parte do problema é que definir a mesa com cantos arredondados não afeta os cantos dos tdelementos dos cantos . Se a tabela tivesse apenas uma cor, isso não seria um problema, pois eu poderia fazer os tdcantos superior e inferior arredondados para a primeira e a última linha, respectivamente. No entanto, estou usando diferentes cores de plano de fundo na tabela para diferenciar os títulos e as faixas, para que os tdelementos internos também mostrem seus cantos arredondados.

Resumo das soluções propostas:

Cercar a mesa com outro elemento com cantos arredondados não funciona porque os cantos quadrados da mesa "vazam".

A especificação da largura da borda como 0 não reduz a tabela.

Os tdcantos inferiores ainda ficam quadrados depois de definir o espaçamento entre células como zero.

Usar JavaScript - funciona evitando o problema.

Soluções possíveis:

As tabelas são geradas em PHP, então eu poderia aplicar uma classe diferente a cada um dos th / tds externos e estilizar cada canto separadamente. Prefiro não fazer isso, já que não é muito elegante e um pouco trabalhoso aplicar a várias tabelas, por isso, mantenha as sugestões.

A possível solução 2 é usar JavaScript (jQuery, especificamente) para estilizar os cantos. Essa solução também funciona, mas ainda não é exatamente o que estou procurando (sei que sou exigente). Eu tenho duas reservas:

  1. este é um site muito leve e eu gostaria de manter o JavaScript o mínimo possível
  2. parte do apelo que o uso do raio da borda tem para mim é degradação graciosa e aprimoramento progressivo. Usando o raio da borda para todos os cantos arredondados, espero ter um site consistentemente arredondado em navegadores compatíveis com CSS3 e um site consistentemente quadrado em outros (estou olhando para você, IE).

Sei que tentar fazer isso com CSS3 hoje pode parecer desnecessário, mas tenho minhas razões. Gostaria também de salientar que esse problema é resultado da especificação w3c, e não do suporte ao CSS3, portanto qualquer solução ainda será relevante e útil quando o CSS3 tiver um suporte mais amplo.

vamin
fonte
2
Não foi possível quebrar a tabela em uma div, definir o raio da borda e "overflow: hidden" na div? Acabei de testar e isso funciona bem, a menos que você precise rolar / expandir em uma div que tenha largura / altura fixa ou seus pais.
13132 Ian
A última declaração CSS carece de ponto e vírgula, eu acho.
JensG
3
Esta pergunta foi feita em 2009. Estou um pouco surpreso que em 2015 não haja soluções melhores do que as listadas abaixo. O W3C deveria ter corrigido isso alguns anos atrás.
Jonathan M

Respostas:

241

Eu descobri. Você apenas precisa usar alguns seletores especiais.

O problema de arredondar os cantos da mesa era que os elementos td também não eram arredondados. Você pode resolver isso fazendo algo assim:

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

Agora tudo gira adequadamente, exceto que ainda há a questão de border-collapse: collapsequebrar tudo.

Uma solução alternativa é adicionarborder-spacing: 0 e deixar o padrão border-collapse: separatena tabela.

vamin
fonte
75
Em vez de mexer no HTML, por que não adicionar border-spacing: 0;como estilo de borda?
Ramon Tayag # 03
3
Eu estava tendo um problema ao definir a cor de fundo da marca TR em vez da marca TD. Certifique-se de remover a tabela de definir a cor de plano de fundo do TD e não do TR.
quer
Bem, o que acontece se você precisar usar a cor de fundo no TR? É possível de alguma forma?
Mohoch 9/10/11
1
Apenas adicionando border-spacing: 0;como Ramon recomendo corrigi-lo para mim. Certifique-se de adicionar os estilos border-radiuse border-spacingaos elementos <th>ou <td>, não <thead>ou <tbody>.
Gavin
1
Eu estou usando bootstrap e eu tenho encontrar a solução usando o conselho de Ramon, assim:border-spacing: 0; border-collapse: separate;
Caner Saygın
84

O método a seguir funciona (testado no Chrome) usando um box-shadowcom uma propagação em 1pxvez de uma borda "real".

table {
    border-collapse: collapse;
    border-radius: 30px;
    border-style: hidden; /* hide standard table (collapsed) border */
    box-shadow: 0 0 0 1px #666; /* this draws the table border  */ 
}

td {
    border: 1px solid #ccc;
}
cmrd.
fonte
5
Esta é a única coisa que funcionou para mim. É difícil obter a cor certa na borda da mesa.
Thomas Ahle
Não é utilizável se a sua tabela tiver uma cor de fundo diferente da área circundante.
g.pickardou
1
Obrigado pelo seu código, ele também funciona com o Firefox 26.0
maxivis
1
@ g.pickardou esse problema pode ser resolvido adicionando 'overflow: hidden' no elemento da tabela.
Val
box-shadow torna a mesa maior e os lados são cortados agora.
Ray
63

Se você deseja uma solução somente CSS (não é necessário definir cellspacing=0no HTML) que permita bordas de 1px (o que você não pode fazer com a border-spacing: 0solução), prefiro fazer o seguinte:

  • Defina um border-righte border-bottompara as células da sua tabela ( tde th)
  • Dê às células da primeira linha umaborder-top
  • Dê às células da primeira coluna umaborder-left
  • Usando os seletores first-childe last-child, arredonde os cantos apropriados para as células da tabela nos quatro cantos.

Veja uma demonstração aqui.

Dado o seguinte HTML:

Veja o exemplo abaixo:

   

 .custom-table{margin:30px;}
    table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 350px;
        
    }
    table tr th,
    table tr td {
        border-right: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        padding: 5px;
    }
    table tr th:first-child, table tr th:last-child{
    border-top:solid 1px      #bbb;}
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
        
    }
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
    }
    table tr th {
        background: #eee;
        text-align: left;
    }
    
    table.Info tr th,
    table.Info tr:first-child td
    {
        border-top: 1px solid #bbb;
    }
    
    /* top-left border-radius */
    table tr:first-child th:first-child,
    table.Info tr:first-child td:first-child {
        border-top-left-radius: 6px;
    }
    
    /* top-right border-radius */
    table tr:first-child th:last-child,
    table.Info tr:first-child td:last-child {
        border-top-right-radius: 6px;
    }
    
    /* bottom-left border-radius */
    table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }
    
    /* bottom-right border-radius */
    table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }
         
<div class="custom-table">
    <table>
        <tr>
            <th>item1</th>
            <th>item2</th>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
    </table>
</div>

NullUserException
fonte
1
Por favor, escreva respostas que incluam código (permanente). Se houver muito código para a resposta, basta postar os bits relevantes e uma explicação de por que eles são relevantes.
Samuel Harmer
3
Essa é uma ótima solução, mas foi um pouco difícil de ler. Reescrevi algumas das regras de estilo e adicionei uma explicação do código, espero que ajude.
22612 Michael Jackson-Smucker #: 16123
aplique um raio à tabela também, ou parecerá estranho quando você aplicar um plano de fundo à própria tabela.
cabra,
O que a table.Infoturma tem a ver com alguma coisa?
Pylinux # 22/16
28

Você já tentou usar em table{border-spacing: 0}vez de table{border-collapse: collapse}???

Cesar
fonte
Obrigado, deixe-me fazer o que eu precisava fazer (que envolvia uma série de elementos TH no topo, fora da caixa 'canto arredondado', que contém todos os TDs abaixo) #
RonLugge
12
O problema border-spacing: 0é que você não pode ter uma borda de 1px, certo? Porque as bordas se empilham em vez de desmoronar.
Michael Martin-Smucker
1
border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden;rendi exatamente o que eu precisava.
Milad.Nozari
23

Você provavelmente terá que colocar outro elemento ao redor da mesa e estilizá-lo com uma borda arredondada.

O rascunho de trabalho especifica que border-radiusnão se aplica aos elementos da tabela quando o valor de border-collapseécollapse .

user59200
fonte
Isso foi algo que eu considerei também, mas se eu criar uma div para cercar a mesa e definir que ela tenha cantos arredondados, os cantos quadrados da mesa ainda sangrarão. Veja o exemplo recém-publicado.
vamin
O melhor compromisso que pude encontrar foi adicionar um bloco THEAD à tabela e aplicar o plano de fundo cinza a ela (com #eee na própria tabela). As células do cabeçalho transbordaram atrás da borda do TABLE, em vez disso, na frente dela. Aumentei a borda da tabela para 3px para ocultar o estouro.
user59200
3
@vamin "sangrar através de" - não se você usaroverflow:hidden;
Brian McCutchon
Assim, nesta situação todos podem usar a minha solução de baixo destes página b2n.ir/table-radius
AmerllicA
15

Como Ian disse, a solução é aninhar a tabela dentro de uma div e configurá-la assim:

.table_wrapper {
  border-radius: 5px;
  overflow: hidden;
}

Com overflow:hidden, os cantos quadrados não sangrarão pela div.

Chris
fonte
Lembre-se, quem quiser usá-lo, que com overflow: hiddenqualquer popover / dica de ferramenta será cortado pelas dimensões do wrapper.
user776686
7

Que eu saiba, a única maneira de fazer isso seria modificar todas as células da seguinte maneira:

table td {
  border-right-width: 0px;
  border-bottom-width: 0px;
}

E então, para colocar a borda na parte inferior e na parte de trás

table tr td:last-child {
  border-right-width: 1px;
}
table tr:last-child td {
  border-bottom-width: 1px;
}

:last-childnão é válido no ie6, mas se você estiver usando border-radius, presumo que você não se importa.

EDITAR:

Depois de examinar sua página de exemplo, parece que você poderá solucionar isso com espaçamento e preenchimento de células.

As bordas cinzas grossas que você vê são realmente o plano de fundo da tabela (você pode ver isso claramente se alterar a cor da borda para vermelho). Se você definir o espaçamento das células como zero (ou equivalente :), td, th { margin:0; }as "bordas" cinzas desaparecerão.

EDIT 2:

Não consigo encontrar uma maneira de fazer isso com apenas uma tabela. Se você alterar a linha do cabeçalho para uma tabela aninhada, poderá conseguir o efeito desejado, mas será mais trabalhoso e não dinâmico.

Joel
fonte
Adicionei um exemplo com cellpacing = 0, e é muito mais próximo. As margens indesejáveis ​​desaparecem, mas os cantos inferiores ainda sangram.
vamin
Obrigado novamente por sua ajuda. As tabelas são geradas em php, então estou pensando que, se não houver uma solução elegante proposta, atribuirei uma classe a cada canto th / td e as estilizaremos separadamente.
vamin
6

Eu tentei uma solução alternativa usando os pseudo-elementos :beforee :afterno thead th:first-childethead th:last-child

Em combinação com a embalagem da mesa com um <div class="radius borderCCC">

table thead th:first-child:before{ 
    content:" ";
    position:absolute;
    top:-1px;
    left:-1px;
    width:15px;
    height:15px;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc; 
    -webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{ 
    content:" "; 
    position:absolute; 
    top:-1px;
    right:-1px; 
    width:15px;
    height:15px;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    -webkit-border-radius:0px 5px 0px 0px;
}

veja jsFiddle

Funciona para mim no chrome (13.0.782.215) Deixe-me saber se isso funciona para você em outros navegadores.

adardesign
fonte
5

Na verdade, você pode adicionar seu tableinterior a divcomo seu invólucro. e atribua estes CSScódigos ao wrapper:

.table-wrapper {
  border: 1px solid #f00;
  border-radius: 5px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}
AmerllicA
fonte
4

As respostas dadas só funcionam quando não há bordas ao redor da mesa, o que é muito limitante!

Eu tenho uma macro no SASS para fazer isso, que apoia plenamente externa e as bordas internas, obtendo o mesmo estilo que o colapso da borda: colapso sem realmente especificá-lo.

Testado em FF / IE8 / Safari / Chrome.

Oferece boas bordas arredondadas em CSS puro em todos os navegadores, exceto o IE8 (degrada normalmente), pois o IE8 não suporta o raio da borda :(

Alguns navegadores mais antigos podem exigir prefixos de fornecedores para trabalhar border-radius, portanto, fique à vontade para adicionar esses prefixos ao seu código, conforme necessário.

Esta resposta não é a mais curta - mas funciona.

.roundedTable {
  border-radius: 20px / 20px;
  border: 1px solid #333333;
  border-spacing: 0px;
}
.roundedTable th {
  padding: 4px;
  background: #ffcc11;
  border-left: 1px solid #333333;
}
.roundedTable th:first-child {
  border-left: none;
  border-top-left-radius: 20px;
}
.roundedTable th:last-child {
  border-top-right-radius: 20px;
}
.roundedTable tr td {
  border: 1px solid #333333;
  border-right: none;
  border-bottom: none;
  padding: 4px;
}
.roundedTable tr td:first-child {
  border-left: none;
}

Para aplicar esse estilo, basta alterar sua

<table>

tag para o seguinte:

<table class="roundedTable">

e inclua os estilos CSS acima em seu HTML.

Espero que isto ajude.

robbie613
fonte
Você não precisa mais de prefixos para o raio da borda; espere pelo FF 3.6 (-moz). Além disso, -khtml certamente não é mais necessário.
21413 Jonatan Littke
@ JonatanLittke, você sempre pode editar a resposta se acha que pode ser melhorada. Eu removi todos os prefixos e adicionei um link para caniuse.com para que as pessoas possam tomar suas próprias decisões sobre prefixos border-radius.
Michael Martin-Smucker
4

Para uma tabela com borda e rolagem, use isso (substitua variáveis, $ textos iniciais)

Se você usar thead, tfootou th, basta substituir tr:first-childe tr-last-childe tdcom eles.

#table-wrap {
  border: $border solid $color-border;
  border-radius: $border-radius;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>
brauliobo
fonte
4

Eu tive o mesmo problema. remova border-collapsecompletamente e use: cellspacing="0" cellpadding="0" no documento html. exemplo:

<table class="top_container" align="center" cellspacing="0" cellpadding="0">
lars
fonte
Isso funciona, mas requer que você use posteriormente os truques firstchild / lastchild para obter o efeito.
Thomas Ahle
4

Acabei de escrever um conjunto louco de CSS para isso que parece funcionar perfeitamente:

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
table td,
table th {
  border-right: 1px solid #CCC;
  border-top: 1px solid #CCC;
  padding: 3px 5px;
  vertical-align: top;
}
table td:first-child,
table th:first-child {
  border-left: 1px solid #CCC;
}
table tr:last-child td,
table tr:last-child th {
  border-bottom: 1px solid #CCC;
}
table thead + tbody tr:first-child td {
  border-top: 0;
}
table thead td,
table th {
  background: #EDEDED;
}

/* complicated rounded table corners! */
table thead:first-child tr:last-child td:first-child {
  border-bottom-left-radius: 0;
}
table thead:first-child tr:last-child td:last-child {
  border-bottom-right-radius: 0;
}
table thead + tbody tr:first-child td:first-child {
  border-top-left-radius: 0;
}
table thead + tbody tr:first-child td:last-child {
  border-top-right-radius: 0;
}
table tr:first-child td:first-child,
table thead tr:first-child td:first-child {
  border-top-left-radius: 5px;
}
table tr:first-child td:last-child,
table thead tr:first-child td:last-child {
  border-top-right-radius: 5px;
}
table tr:last-child td:first-child,
table thead:last-child tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
table tr:last-child td:last-child,
table thead:last-child tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

/* end complicated rounded table corners !*/
Rev
fonte
3

Solução com colapso de borda: separado para tabela e exibição: tabela em linha para tbody e thead.

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  background: transparent;   
}
table thead {
  display: inline-table;
  width: 100%;
  background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0;
  -webkit-border-top-left-radius: 7px;
  -moz-border-radius-topleft: 7px;
  -webkit-border-top-right-radius: 7px;
  -moz-border-radius-topright: 7px;
    border-radius: 7px 7px 0px 0px;
  padding: 1px;
  padding-bottom: 0;
}

table tbody {
  border: 1px solid #ddd;
  display: inline-table;
  width: 100%;
  border-top: none;        
}
Tommer
fonte
não há razão para fazer esta resposta wiki da comunidade. Isso faz com que você não obtenha reputação de sua resposta.
tacaswell
3

Eu sou novo em HTML e CSS e também estava procurando uma solução para isso, aqui o que encontro.

table,th,td {
   border: 1px solid black;
   border-spacing: 0
}
/* add border-radius to table only*/
table {
   border-radius: 25px    
}
/* then add border-radius to top left border of left heading cell */
th:first-child {
   border-radius: 25px 0 0 0
}
/* then add border-radius to top right border of right heading cell */
th:last-child {
   border-radius: 0 25px 0 0
}
/* then add border-radius to bottom left border of left cell of last row */
tr:last-child td:first-child {
   border-radius: 0 0 0 25px
}
/* then add border-radius to bottom right border of right cell of last row */
tr:last-child td:last-child {
   border-radius: 0 0 25px 0
}

Eu tento, adivinhe o que funciona :)

Ahmed Mostafa
fonte
3

Encontrei esta resposta depois de encontrar o mesmo problema, mas achei muito simples: basta dar um estouro na tabela: hidden

Não há necessidade de um elemento de embalagem. É verdade que não sei se isso funcionaria há 7 anos quando a pergunta foi feita inicialmente, mas funciona agora.

Akexis
fonte
Esta é uma solução inteligente, mas também "remove" a borda real também. No Chrome, a borda direita e a borda inferior da tabela desaparecem e todos os cantos arredondados não têm borda.
Alex Jorgenson
3

Mesa com cantos arredondados e células delimitadas. Usando @Ramon Tayag solução .

A chave é usar border-spacing: 0 como ele aponta.

Solução usando SCSS .

$line: 1px solid #979797;
$radius: 5px;

table {
  border: $line;
  border-radius: $radius;
  border-spacing: 0;
  th,
  tr:not(:last-child) td {
    border-bottom: $line;
  }
  th:not(:last-child),
  td:not(:last-child) {
    border-right: $line;
  }
}
Pere Pages
fonte
2

Eu comecei a experimentar com "display" e eu achei que: border-radius, border, margin, padding, em um tablesão exibidos com:

display: inline-table;

Por exemplo

table tbody tr {
  display: inline-table;
  width: 960px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Mas precisamos definir uma widthde cada coluna

tr td.first-column {
  width: 100px;
}
tr td.second-column {
  width: 860px;
}
Astro
fonte
2

Aqui está um exemplo recente de como implementar uma tabela com cantos arredondados em http://medialoot.com/preview/css-ui-kit/demo.html . É baseado nos seletores especiais sugeridos por Joel Potter acima. Como você pode ver, também inclui alguma mágica para deixar o IE um pouco feliz. Inclui alguns estilos extras para alternar a cor das linhas:

table-wrapper {
  width: 460px;
  background: #E0E0E0;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
  background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
  background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
  padding: 8px;
  -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -webkit-border-radius: 10px;
  /*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.table-wrapper table {
  width: 460px;
}
.table-header {
  height: 35px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  text-decoration: none;
  font-weight: bold;
}
.table-row td {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  font-weight: normal;
  color: #858585;
  padding: 10px;
  border-left: 1px solid #ccc;
  -khtml-box-shadow: 0px 1px 0px #B2B3B5;
  -webkit-box-shadow: 0px 1px 0px #B2B3B5;
  -moz-box-shadow: 0px 1px 0px #ddd;
  -o-box-shadow: 0px 1px 0px #B2B3B5;
  box-shadow: 0px 1px 0px #B2B3B5;
}
tr th {
  border-left: 1px solid #ccc;
}
tr th:first-child {
 -khtml-border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -o-border-top-left-radius: 8px;
  /*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-left-radius: 8px;
  border: none;
}
tr td:first-child {
  border: none;
}
tr th:last-child {
  -khtml-border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -o-border-top-right-radius: 8px;
  /*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-right-radius: 8px;
}
tr {
  background: #fff;
}
tr:nth-child(odd) {
  background: #F3F3F3;
}
tr:nth-child(even) {
  background: #fff;
}
tr:last-child td:first-child {
  -khtml-border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -o-border-bottom-left-radius: 8px;
  /*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
  -khtml-border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -o-border-bottom-right-radius: 8px;
  /*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-right-radius: 8px;
}
Mac Cowell
fonte
1

Aqui está uma maneira:

div {
  ...
  overflow: hidden;
  border-radius: 14px;
  transform: rotate(0deg);
}
table {
  border-spacing: 0;
}
<div>
  <table></table>
</div>

Ou

    div {
      ...
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      z-index: 1;
    }

luow
fonte
0

Eu sempre faço dessa maneira usando Sass

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}
Diego Mello
fonte
Eu acho que você pode não entender, ele está tentando fazer isso com border-collapse: collapseativado.
Giovannipds
@giovannipds Dê uma olhada na própria resposta (resposta aceita). Meu caminho é apenas outro caminho. Agora remova o "-1".
Diego Mello
Oh, me desculpe, você está definitivamente certo, meu erro, a resposta aceita parece dizer exatamente a mesma coisa. Eu deveria seguir o que estava escrito no título da pergunta, ele enfatizou que queria o colapso das fronteiras, então fui direto ao assunto. Eu removeria o -1 se pudesse, mas não posso, você precisa editar algo na resposta para permitir isso. Tente mencionar algo sobre o qual isso não é possível border-collapse: collapse. Perdoe novamente, esperarei sua atualização.
Giovannipds
0

Até agora, a melhor solução vem da sua própria solução e é assim:

table, tr, td, th{
  border: 1px solid; 
  text-align: center;
}

table{
	border-spacing: 0;
  width: 100%;
  display: table;
}

table tr:last-child td:first-child, tr:last-child, table {
    border-bottom-left-radius: 25px;
}

table tr:last-child td:last-child, tr:last-child, table {
    border-bottom-right-radius: 25px;
}


table tr:first-child th:first-child, tr:first-child, table {
    border-top-left-radius: 25px;
}

table tr:first-child th:last-child, tr:first-child, table {
    border-top-right-radius: 25px;
}
<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>

Ανδρέας Μιχελής
fonte
-1

O raio da borda agora é oficialmente suportado. Portanto, em todos os exemplos acima, você pode soltar o prefixo "-moz-".

Outro truque é usar a mesma cor para as linhas superior e inferior da borda. Com todas as três cores iguais, ela se mistura e se parece com uma mesa perfeitamente arredondada, embora não seja fisicamente.

Falcão
fonte