html - radius - Propiedad de radio de borde de CSS3 y colapso de borde: el colapso no se mezcla. ¿Cómo puedo usar el radio de borde para crear una tabla colapsada con esquinas redondeadas?
css rounded corners (21)
Editar - Título original: ¿Existe una forma alternativa de lograr border-collapse:collapse en CSS (para tener una tabla de esquinas redondeada y colapsada)?
Dado que resulta que simplemente colapsar los bordes de la tabla no resuelve el problema de raíz, he actualizado el título para reflejar mejor la discusión.
Estoy tratando de hacer una tabla con esquinas redondeadas utilizando la propiedad de border-radius CSS3 . Los estilos de tabla que estoy usando se ven algo así:
table {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px
}
Aquí está el problema. También quiero establecer la propiedad border-collapse:collapse , y cuando se establece, border-radius ya no funciona. ¿Existe una forma basada en CSS que pueda obtener el mismo efecto que border-collapse:collapse sin usarlo realmente?
Ediciones:
He creado una página simple para demostrar el problema here (solo Firefox / Safari).
Parece que una gran parte del problema es que configurar la mesa para que tenga esquinas redondeadas no afecta a las esquinas de los elementos de la esquina td . Si la tabla fuera de un solo color, esto no sería un problema, ya que podría hacer que las esquinas superior e inferior redondeadas para la primera y la última fila respectivamente. Sin embargo, estoy usando diferentes colores de fondo para la tabla para diferenciar los encabezados y para el trazado de líneas, por lo que los elementos td internos también mostrarían sus esquinas redondeadas.
Resumen de las soluciones propuestas:
Rodear la mesa con otro elemento con esquinas redondas no funciona porque las esquinas cuadradas de la mesa "sangran".
Especificar ancho de borde a 0 no contrae la tabla.
Las esquinas de la parte inferior de la base aún están cuadradas después de configurar el espacio de celdas a cero
Usar JavaScript en su lugar, funciona evitando el problema.
Soluciones posibles:
Las tablas se generan en PHP, así que solo 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 difícil aplicarlo en varias tablas, así que por favor, siga las sugerencias.
La posible solución 2 es usar JavaScript (jQuery, específicamente) para estilizar las esquinas. Esta solución también funciona, pero todavía no es exactamente lo que estoy buscando (sé que soy delicado). Tengo dos reservas:
- Este es un sitio muy ligero, y me gustaría mantener JavaScript al mínimo.
- parte del atractivo que tiene para mí el uso del radio de la frontera es una degradación elegante y una mejora progresiva. Al usar el radio de borde para todas las esquinas redondeadas, espero tener un sitio redondeado consistentemente en navegadores compatibles con CSS3 y un sitio cuadrado consistentemente 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 un soporte pobre de CSS3, por lo que cualquier solución seguirá siendo relevante y útil cuando CSS3 tenga un soporte más amplio.
¿Ha intentado usar la table{border-spacing: 0} lugar de la table{border-collapse: collapse} ???
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 !*/
Comencé a experimentar con "mostrar" y encontré que: border-radius , border , margin , padding , en una 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;
}
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 el overflow:hidden , las esquinas cuadradas no sangran a través del div.
El radio de la frontera ahora es oficialmente compatible. Por lo tanto, en todos los ejemplos anteriores puede eliminar el prefijo "-moz-".
Otro truco es usar el mismo color para las filas superior e inferior como lo es su borde. Con los 3 colores iguales, se combina y se ve como una mesa perfectamente redondeada, aunque no es físicamente.
El siguiente método funciona (probado en Chrome) usando una box-shadow con una extensión de 1px 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;
}
En realidad puedes agregar tu table dentro de un div como su envoltorio. y luego asigne estos códigos CSS al envoltorio:
.table-wrapper {
border: 1px solid #f00;
border-radius: 5px;
overflow: hidden;
}
table {
border-collapse: collapse;
}
Encontré esta respuesta después de encontrar el mismo problema, pero encontré que es bastante simple: simplemente desborda la tabla: oculta
No hay necesidad de un elemento de envoltura. De acuerdo, no sé si esto hubiera funcionado hace 7 años cuando se hizo la pregunta inicialmente, pero ahora funciona.
Este es un ejemplo reciente de cómo implementar una tabla con esquinas redondeadas desde http://medialoot.com/preview/css-ui-kit/demo.html . Se basa en los selectores especiales sugeridos por Joel Potter arriba. Como puedes ver, también incluye algo de magia para hacer que IE sea un poco feliz. Incluye algunos estilos extra 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;
}
Intenté una solución utilizando los pseudo elementos :before y :after en el thead th:first-child y thead th:last-child
En combinación con envolver la tabla 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ísame si esto funciona para ti en otros navegadores.
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 externos e internos, logrando el mismo estilo que el colapso de bordes: colapso sin especificarlo realmente.
Probado en FF / IE8 / Safari / Chrome.
Da lindos bordes redondeados en CSS puro en todos los navegadores, pero IE8 (se degrada con gracia) ya que IE8 no es compatible con border-radius :(
Algunos navegadores más antiguos pueden requerir que los prefijos de los proveedores funcionen con 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 cambia tu
<table>
etiqueta a lo siguiente:
<table class="roundedTable">
y asegúrese de incluir los estilos CSS anteriores en su HTML.
Espero que esto ayude.
Me lo imaginé. Solo tienes que usar algunos selectores especiales.
El problema con redondear las esquinas de la tabla fue que los elementos td no se redondearon también. Puedes 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 del border-collapse: collapse de la border-collapse: collapse rompiendo todo. Una solución es establecer cellspacing="0" en el html (gracias, Joel ).
Mesa 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 utilizando 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;
}
}
Para una tabla con bordes y desplazable, use esto (reemplazar variables, $ textos iniciales)
Si usa thead , tfoot o th , simplemente reemplace 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>
Probablemente tendrás que colocar otro elemento alrededor de la mesa y un estilo que tenga 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 del border-collapse se collapse .
Que yo sepa, la única manera 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 derecha de vuelta
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á usando border-radius , asumo que no le importa.
EDITAR:
Después de ver su página de ejemplo, parece que puede solucionar este problema con el espacio y el relleno de las celdas.
Los bordes grises gruesos 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 de manera equivalente: td, th { margin:0; } ) los "bordes" grises desaparecerán.
EDIT 2:
No puedo encontrar una manera de hacer esto con una sola mesa. Si cambia su fila de encabezado a una tabla anidada, es posible que pueda obtener el efecto que desea, pero será más trabajo y no dinámico.
Si desea una solución solo para CSS (no es necesario configurar el cellspacing=0 en el HTML) que permita bordes de 1px (lo que no puede hacer con la solución de border-spacing: 0 ), prefiero hacer lo siguiente:
- Establezca un
border-righty unborder-bottompara las celdas de su tabla (tdyth) - Dale a las celdas de la primera fila un
border-top - Dale a las celdas de la primera columna un
border-left - Con los selectores
first-childylast-child, redondee las esquinas apropiadas para las celdas de la tabla en las cuatro esquinas.
Dado el siguiente HTML:
VEA 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>
Siempre hago así 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;
}
}
}
Solución con colapso de bordes: separada para la tabla y la 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 con 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 :)
Yo tuve el mismo problema. elimine el border-collapse completo y use: cellspacing="0" cellpadding="0" en el documento html. ejemplo:
<table class="top_container" align="center" cellspacing="0" cellpadding="0">