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?

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.

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.

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;
}

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>

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

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 .

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.

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.

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.

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;
}

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.

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>

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">

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 !*/

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;        
}

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 :)

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.

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;
  }
}

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;
}

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;
}

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;
    }

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;
    }
  }
}

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>

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.