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

Question 1

Estoy tratando de hacer una mesa con esquinas redondeadas usando CSS border-radius propiedad. Los estilos de tabla que estoy usando se ven así:

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

Aquí está el problema. También quiero configurar el border-collapse:collapse propiedad, y cuando se establece border-radius ya no funciona ¿Hay alguna forma basada en CSS en la que pueda obtener el mismo efecto que border-collapse:collapse sin usarlo realmente?

Parece que gran parte del problema es que poner la mesa para que tenga las esquinas redondeadas no afecta a las esquinas de la esquina td elementos. Si la mesa fuera de un solo color, esto no sería un problema ya que solo podría hacer la parte superior e inferior td esquinas redondeadas para la primera y última fila respectivamente. Sin embargo, estoy usando diferentes colores de fondo para la tabla para diferenciar los encabezados y para las franjas, por lo que el interior td los elementos también mostrarían sus esquinas redondeadas.

Rodear la mesa con otro elemento con esquinas redondeadas no funciona porque las esquinas cuadradas de la mesa “se traspasan”.

Especificar el ancho del borde en 0 no colapsa la tabla.

Fondo td las esquinas siguen siendo cuadradas después de establecer el espaciado de celdas en cero.

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. Preferiría no hacer esto, ya que no es muy elegante y es un poco complicado aplicarlo a varias tablas, así que sigan llegando sugerencias.

Me gustaría hacer esto sin JavaScript.

Question 2

Me lo imaginé. Solo tienes que usar unos selectores especiales.

El problema de redondear las esquinas de la mesa era que el td los elementos tampoco se redondearon. Puedes resolver eso haciendo algo como esto:

table tr:last-child td:first-child {
    border: 2px solid orange;
    border-bottom-left-radius: 10px;
}
    
table tr:last-child td:last-child {
    border: 2px solid green;
    border-bottom-right-radius: 10px;
}

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

Ahora todo se redondea correctamente, excepto que todavía queda la cuestión de border-collapse: collapse rompiendo todo.

Una solución es agregar border-spacing: 0 y dejar el valor predeterminado border-collapse: separate en la mesa.

Question 3

El siguiente método funciona (probado en Chrome) usando un box-shadow con una difusión de 1px en lugar 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;
    }

<table>
  <thead>
    <tr>
      <th>Foo</th>
      <th>Bar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Baz</td>
      <td>Qux</td>
    </tr>
    <tr>
      <td>Life is short</td>
      <td rowspan="3">and</td>
    </tr>
    <tr>
      <td>Love</td>
    </tr>
    <tr>
      <td>is always over</td>
    </tr>
    <tr>
      <td>In the</td>
      <td>Morning</td>
    </tr>
  </tbody>
</table>

Question 4

Si desea una solución solo de CSS (no es necesario configurar cellspacing=0 en el HTML) que permite bordes de 1px (que no se puede hacer con el border-spacing: 0 solución), prefiero hacer lo siguiente:

Establecer un border-right y border-bottom para las celdas de su tabla (td y th)
Dar las celdas en el primera fila a border-top
Dar las celdas en el primera columna a border-left
Utilizando el first-child y last-child selectores, 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:

   
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 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;
  border-top: solid 1px #bbb;
}

/* top-left border-radius */
table tr:first-child th:first-child {
  border-top-left-radius: 6px;
}

/* top-right border-radius */
table tr:first-child th: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>
    <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>

Question 5

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

Question 6

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

Él borrador de trabajo especifica que border-radius no se aplica a los elementos de la tabla cuando el valor de border-collapse es collapse.

Question 7

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

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

Con overflow:hiddenlas esquinas cuadradas no traspasarán el div.

Question 8

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 hacia atrás

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

:last-child no es válido en ie6, pero si está utilizando border-radius Supongo que no te importa.

EDITAR:

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

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

EDITAR 2:

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

¿Ha sido útil esta solución?