CSS3 es border-radius de la propiedad y de la frontera-colapso:colapso no se mezclan.¿Cómo puedo usar border-radius para crear un colapso de la tabla con las esquinas redondeadas?

https://stackoverflow.com/questions/628301

06-07-2019
|

Pregunta

Editar - Título Original: Hay una forma alternativa de lograr border-collapse:collapse en CSS (con el fin de tener un colapso, esquina redondeada de la tabla)?

Pues resulta que simplemente llegar a la mesa de las fronteras de colapso no soluciona la raíz del problema, he actualizado el título para reflejar mejor la discusión.

Estoy intentando hacer una tabla con las esquinas redondeadas el uso de la CSS3 border-radius de la propiedad.Los estilos de tabla que estoy usando algo como esto:

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

Aquí está el problema.También quiero establecer el border-collapse:collapse de la propiedad, y cuando la que se establece border-radius ya no funciona.Hay un CSS basado en la forma en que me puede conseguir el mismo efecto border-collapse:collapse sin usarla?

Ediciones:

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

Parece que una gran parte del problema es que la configuración de la tabla para tener las esquinas redondeadas no afecta a las esquinas de la esquina td elementos.Si la mesa estaba todo de un solo color, esto no sería un problema, ya que podría hacer que la parte superior e inferior td las esquinas redondeadas para la primera y la última fila, respectivamente.Sin embargo, estoy utilizando diferentes colores de fondo para la tabla para diferenciar los títulos y para la creación de bandas, por lo que el interior td elementos de mostrar a sus esquinas redondeadas así.

Resumen de la propuesta de soluciones:

Alrededor de la mesa con otro elemento con las esquinas redondeadas no funciona porque la tabla de la plaza de las esquinas "sangrar a través de."

La especificación de anchura de borde a 0 no se caiga de la mesa.

Parte inferior td las esquinas todavía square después de la configuración de "cellspacing" a cero.

El uso de JavaScript en lugar de obras, evitando el problema.

Posibles soluciones:

Las tablas se generan en PHP, así que yo sólo podía aplicar una clase diferente para cada uno de los exteriores th/tds y el estilo de cada esquina por separado.Yo prefiero no hacerlo, ya que no es muy elegante y un poco de dolor para aplicar a varias tablas, así que por favor mantenga las sugerencias que viene.

Posible solución 2 es el uso de JavaScript (jQuery, específicamente) al estilo de las esquinas.Esta solución también funciona, pero todavía no se muy bien lo que estoy buscando (sé que soy exigente).Tengo dos reservas:

este es un muy ligero sitio, y me gustaría seguir con JavaScript para el más mínimo
parte de la atracción que el uso de border-radius tiene para mí es la degradación y mejora progresiva.Mediante el uso de border-radius para todas las esquinas redondeadas, espero tener constantemente una redondeado sitio en CSS3 exploradores compatibles y consistentes de la plaza de sitio en los demás (te estoy mirando a ti, IE).

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

Solución

Lo descubrí. 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: collapse romper todo. Una solución alternativa es establecer cellspacing="0" en el html (gracias, Joel ).

Otros consejos

El siguiente método funciona (probado en Chrome) utilizando un box-shadow con una extensión de 1px en lugar de un " real " borde.

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 quieres un CSS-la única solución (no hay necesidad de establecer cellspacing=0 en el HTML) que permite 1px fronteras (que no se puede hacer con el border-spacing: 0 la solución), prefiero hacer lo siguiente:

Establecer un border-right y border-bottom para que tu las celdas de la tabla (td y th)
Dar las celdas en la primera fila un border-top
Dar las celdas en la primera columna un border-left
El uso de la first-child y last-child los selectores, ronda el adecuado esquinas de las celdas de la tabla en las cuatro esquinas.

Ver una demo aquí.

Dado el siguiente código HTML:

VÉASE el siguiente ejemplo:

   

 .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 table{border-spacing: 0} en lugar de table{border-collapse: collapse} ???

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

El borrador de trabajo especifica que border-radius no se aplica a los elementos de la tabla cuando el valor de border-collapse es 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.

Hasta donde sé, la única forma de hacerlo sería modificar todas las celdas de esta 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-child no es válido en ie6, pero si está utilizando border-radius supongo que no le importa.

EDIT:

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 equivalente: td, th { margin:0; }) el gris & Quot; bordes & Quot; desaparecerá.

EDITAR 2:

No puedo encontrar una manera de hacer esto con una sola tabla. 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.

He intentado una solución con el pseudo elementos :before y :after en el thead th:first-child y thead th:last-child

En combinación con la envoltura de la mesa con una <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

A mi me funciona en chrome (13.0.782.215) quisiera saber si esto funciona para usted en otros navegadores.

Tuve el mismo problema. eliminar border-collapse completamente y usar: cellspacing="0" cellpadding="0" en el documento html. ejemplo:

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

En realidad, puede agregar su table dentro de un div como su contenedor. y luego asigne estos CSS có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 tabla, ¡lo cual es muy limitante!

Tengo una macro en SASS para hacer esto, que es totalmente compatible con los bordes internos externos y , 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 los navegadores antiguos pueden requerir prefijos de proveedor para trabajar con border-radius, así que siéntase libre para 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 un confinado y de desplazamiento de la tabla, el uso de este (sustituir las variables, $ a partir de los textos)

Si usted utiliza thead, tfoot o th, basta con sustituir tr:first-child y tr-last-child y td con 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>

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 qué 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 ajuste. De acuerdo, no sé si esto habría funcionado hace 7 años cuando se hizo la pregunta inicialmente, pero funciona ahora.

Tabla con esquinas redondeadas y con celdas bordeadas. Utilizando la solución @Ramon Tayag .

La clave es usar border-spacing: 0 como é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;
  }
}

Comencé a experimentar con " display " y descubrí que: border-radius, border, margin, padding, en un table se 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 un width de 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;
}

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

Border-radius ahora es oficialmente compatible. Entonces, en todos los ejemplos anteriores, puede colocar & Quot; -moz - & Quot; prefijo.

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

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow