La propiedad border-radius de CSS3 y border-collapse: collapse no se mezclan. ¿Cómo puedo usar border-radius para crear una tabla contraída con esquinas redondeadas?

Editar - Título original: ¿Hay una forma alternativa de conseguir border-collapse:collapseen CSS(con el fin de tener una, mesa de esquina redondeada colapsado)?

Como resulta que el simple hecho de colapsar los bordes de la tabla no resuelve el problema raíz, he actualizado el título para reflejar mejor la discusión.

Estoy tratando de hacer una tabla con esquinas redondeadas usando la CSS3 border-radiuspropiedad Los estilos de tabla que estoy usando se parecen a esto:

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

Aquí está el problema. También quiero establecer la border-collapse:collapsepropiedad, y cuando eso se establece border-radiusya no funciona. ¿Hay alguna forma basada en CSS que pueda obtener el mismo efecto que border-collapse:collapsesin usarlo?

Ediciones:

He hecho una página simple para demostrar el problema aquí (solo Firefox / Safari).

Parece que una gran parte del problema es que configurar la tabla para que tenga esquinas redondeadas no afecta las esquinas de los tdelementos de esquina . Si la tabla fuera de un solo color, esto no sería un problema, ya que podría tdredondear las esquinas superior e inferior para la primera y la última fila respectivamente. Sin embargo, estoy usando diferentes colores de fondo para la tabla para diferenciar los encabezados y las rayas, por lo que los tdelementos internos también mostrarán sus esquinas redondeadas.

Resumen de soluciones propuestas:

Rodear la mesa con otro elemento con esquinas redondeadas no funciona porque las esquinas cuadradas de la mesa "sangran".

Especificar el ancho del borde a 0 no contrae la tabla.

Las tdesquinas inferiores siguen siendo cuadradas después de establecer el espacio de celdas en cero.

En cambio, usar JavaScript funciona evitando el problema.

Soluciones posibles:

Las tablas se generan en PHP, por lo que podría aplicar una clase diferente a cada uno de los th / tds externos y diseñar cada esquina por separado. Prefiero no hacer esto, ya que no es muy elegante y es un poco difícil aplicarlo en varias tablas, así que sigan enviando sugerencias.

La posible solución 2 es usar JavaScript (jQuery, específicamente) para diseñar las esquinas. Esta solución también funciona, pero aún no es lo que estoy buscando (sé que soy exigente). Tengo dos reservas:

1. este es un sitio muy liviano, y me gustaría mantener JavaScript al mínimo
2. Parte del atractivo que tiene para mí el uso del radio de borde es la degradación elegante y la mejora progresiva. Al usar border-radius para todas las esquinas redondeadas, espero tener un sitio consistentemente redondeado en navegadores con capacidad CSS3 y un sitio consistentemente cuadrado en otros (te estoy mirando, IE).

Sé que tratar de hacer esto con CSS3 hoy puede parecer innecesario, pero tengo mis razones. También me gustaría señalar que este problema es el resultado de la especificación w3c, no el mal soporte de CSS3, por lo que cualquier solución seguirá siendo relevante y útil cuando CSS3 tenga un soporte más extendido.

Me lo imaginé. Solo tiene que usar algunos selectores especiales.

El problema al redondear las esquinas de la tabla era que los elementos td tampoco se redondearon. Puede resolver eso haciendo algo como esto:

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

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

Ahora todo se redondea correctamente, excepto que todavía existe el problema de border-collapse: collapseromperlo todo.

Una solución alternativa es agregarborder-spacing: 0 y dejar el valor predeterminado border-collapse: separateen la tabla.

El siguiente método funciona (probado en Chrome) utilizando un borde box-shadowextendido en 1pxlugar de un borde "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;
}

Si desea una solución solo para CSS (sin necesidad de configurar cellspacing=0en el HTML) que permita bordes de 1px (que no puede hacer con la border-spacing: 0solución), prefiero hacer lo siguiente:

• Establezca un border-righty border-bottompara las celdas de su tabla ( tdy th)
• Dar las celdas de la primera fila de unaborder-top
• Dele a las celdas de la primera columna unborder-left
• Usando los selectores first-childy last-child, redondee las esquinas apropiadas para las celdas de la tabla en las cuatro esquinas.

Vea una demostración aquí.

Dado el siguiente HTML:

VER ejemplo a continuación:

   

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

¿Has intentado usar en table{border-spacing: 0}lugar de table{border-collapse: collapse}???

Probablemente tendrá que poner otro elemento alrededor de la mesa y diseñarlo con un borde redondeado.

El borrador de trabajo especifica que border-radiusno se aplica a los elementos de la tabla cuando el valor de border-collapsees collapse.

Como dijo Ian, la solución es anidar la tabla dentro de un div y configurarla así:

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

Con overflow:hidden, las esquinas cuadradas no sangrarán a través del div.

Que yo sepa, la única forma en que podría hacerlo sería modificar todas las celdas de la siguiente manera:

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

Y luego para obtener el borde en la parte inferior y de regreso

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

:last-childno es válido en ie6, pero si está utilizando border-radius, supongo que no le importa.

EDITAR:

Después de mirar su página de ejemplo, parece que puede evitar esto con espacio entre celdas y relleno.

Los gruesos bordes grises que está viendo son en realidad el fondo de la tabla (puede ver esto claramente si cambia el color del borde a rojo). Si establece el espacio de celdas en cero (o equivalentemente td, th { margin:0; }), los "bordes" grises desaparecerán.

EDITAR 2:

No puedo encontrar una manera de hacer esto con una sola mesa. Si cambia la fila del encabezado a una tabla anidada, es posible que pueda obtener el efecto que desea, pero será más trabajo y no dinámico.

Intenté una solución usando los pseudo elementos :beforey :afteren el thead th:first-childythead th:last-child

En combinación con envolver la mesa con un <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;
}

ver jsFiddle

Funciona para mí en Chrome (13.0.782.215) Avíseme si esto funciona para usted en otros navegadores.

En realidad, puede agregar su tableinterior divcomo su envoltorio. y luego asigne estos CSScódigos al contenedor:

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

table {
  border-collapse: collapse;
}

Las respuestas dadas solo funcionan cuando no hay bordes alrededor de la mesa, ¡lo cual es muy limitante!

Tengo una macro en SASS para hacer esto, que es totalmente compatible con los bordes externos e internos, logrando el mismo estilo que el colapso del borde: colapso sin especificarlo realmente.

Probado en FF / IE8 / Safari / Chrome.

Proporciona bordes redondeados agradables en CSS puro en todos los navegadores, pero IE8 (se degrada con gracia) ya que IE8 no admite el radio del borde :(

Algunos navegadores antiguos pueden requerir prefijos de proveedor para trabajar border-radius, así que siéntase libre de agregar esos prefijos a su código según sea necesario.

Esta respuesta no es la más corta, pero 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 este estilo, simplemente cambie su

<table>

etiqueta a lo siguiente:

<table class="roundedTable">

y asegúrese de incluir los estilos CSS anteriores en su HTML.

Espero que esto ayude.

Para una tabla con borde y desplazable, use esto (reemplazar variables, $textos iniciales)

Si se utiliza thead, tfooto th, simplemente reemplazar tr:first-childy tr-last-child, y tdcon ellos.

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

Yo tuve el mismo problema. eliminar border-collapsecompletamente y usar: cellspacing="0" cellpadding="0" en el documento html. ejemplo:

<table class="top_container" align="center" cellspacing="0" cellpadding="0">

Acabo de escribir un conjunto loco de CSS para esto que parece funcionar perfectamente:

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

Solución con colapso de borde: separado para tabla y pantalla: tabla en línea para tbody y 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;        
}

Soy nuevo en HTML y CSS y también estaba buscando una solución para esto, aquí lo que encuentro.

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
}

Lo intento, adivina lo que funciona :)

Encontré esta respuesta después de encontrarme con el mismo problema, pero descubrí que es bastante simple: simplemente desborde la tabla: oculto

No es necesario un elemento de envoltura. De acuerdo, no sé si esto habría funcionado hace 7 años cuando se hizo la pregunta inicialmente, pero funciona ahora.

Mesa con esquinas redondeadas y con celdas bordeadas. Usando la solución @Ramon Tayag .

La clave es usar border-spacing: 0como él señala.

Solución 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;
  }
}

Empecé a experimentar con "pantalla" y me encontré con que: border-radius, border, margin, padding, en una tablese muestran con:

display: inline-table;

Por ejemplo

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

Pero necesitamos establecer una widthde cada columna

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

Aquí hay un ejemplo reciente de cómo implementar una tabla con esquinas redondeadas de http://medialoot.com/preview/css-ui-kit/demo.html . Se basa en los selectores especiales sugeridos por Joel Potter arriba. Como puede ver, también incluye algo de magia para hacer que IE esté un poco feliz. Incluye algunos estilos adicionales para alternar el color de las filas:

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

Aquí hay una manera:

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

<div>
  <table></table>
</div>

O

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

Siempre hago esto 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;
    }
  }
}

La mejor solución hasta ahora proviene de su propia solución y es así:

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>

Border-radius ahora es oficialmente compatible. Entonces, en todos los ejemplos anteriores, puede colocar el prefijo "-moz-".

Otro truco es usar el mismo color para las filas superior e inferior que el borde. Con los 3 colores iguales, se combina y se ve como una mesa perfectamente redondeada, aunque no es físicamente.