Esquinas redondeadas de la mesa Sólo CSS

He buscado y buscado, pero no he podido encontrar una solución para mi requerimiento.

Tengo una simple tabla HTML. Quiero esquinas redondeadas, sin usar imágenes o JS, es decir, solo CSS puro. Me gusta esto:

Esbozo de diseño

Esquinas redondeadas para las celdas de las esquinas y un borde grueso de 1px para las celdas.

Hasta ahora tengo esto:

 table { -moz-border-radius: 5px !important; border-collapse: collapse !important; border: none !important; } table th, table td { border: none !important } table th:first-child { -moz-border-radius: 5px 0 0 0 !important; } table th:last-child { -moz-border-radius: 0 5px 0 0 !important; } table tr:last-child td:first-child { -moz-border-radius: 0 0 0 5px !important; } table tr:last-child td:last-child { -moz-border-radius: 0 0 5px 0 !important; } table tr:hover td { background-color: #ddd !important } 

Pero eso me deja sin fronteras para las células. Si agrego bordes, ¡no son redondeados!

Alguna solución?

Parece funcionar bien en FF y Chrome (no se han probado otros) con fronteras separadas: http://jsfiddle.net/7veZQ/3/

Editar: Aquí hay una implementación relativamente limpia de su boceto:

 table { border-collapse:separate; border:solid black 1px; border-radius:6px; -moz-border-radius:6px; } td, th { border-left:solid black 1px; border-top:solid black 1px; } th { background-color: blue; border-top: none; } td:first-child, th:first-child { border-left: none; } 
 
blah fwee spoon
blah fwee spoon
blah fwee spoon

En primer lugar, necesitará más que -moz-border-radius si desea admitir todos los navegadores. Debe especificar todas las variantes, incluido el border-radius simple, de la siguiente manera:

 -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; 

En segundo lugar, para responder directamente a su pregunta, border-radius realidad no muestra un borde; simplemente establece cómo se ven las esquinas del borde, si hay una.

Para activar el borde y obtener las esquinas redondeadas, también necesita el atributo de border en los elementos td y th .

 td, th { border:solid black 1px; } 

También verá las esquinas redondeadas si tiene un color de fondo (o gráfico), aunque, por supuesto, tendría que ser un color de fondo diferente al elemento circundante para que las esquinas redondeadas sean visibles sin un borde.

Vale la pena señalar que algunos navegadores más antiguos no les gusta poner border-radius en tablas / celdas de tabla. Puede valer la pena poner un

dentro de cada celda y diseñarlo en su lugar. Sin embargo, esto no debería afectar a las versiones actuales de ningún navegador (excepto IE, que no admite ninguna esquina redondeada, ver más abajo)

Finalmente, no es que IE no sea compatible con border-radius (IE9 beta lo hace, pero la mayoría de los usuarios de IE estarán en IE8 o menos). Si quieres piratear IE para que admita border-radius, mira http://css3pie.com/

[EDITAR]

De acuerdo, esto me molestaba, así que hice algunas pruebas.

Aquí hay un ejemplo de JSFiddle con el que he estado jugando

Parece que lo crítico que te estabas perdiendo fue border-collapse:separate; en el elemento de la mesa. Esto evita que las celdas unan sus bordes, lo que les permite recoger el radio del borde.

Espero que ayude.

Para mí, la solución Twitter Bootstrap se ve bien. Excluye IE <9 (sin esquinas redondeadas en IE 8 y menor), pero eso está bien, creo, si desarrolla aplicaciones web prospectivas.

CSS / HTML:

 table { border: 1px solid #ddd; border-collapse: separate; border-left: 0; border-radius: 4px; border-spacing: 0px; } thead { display: table-header-group; vertical-align: middle; border-color: inherit; border-collapse: separate; } tr { display: table-row; vertical-align: inherit; border-color: inherit; } th, td { padding: 5px 4px 6px 4px; text-align: left; vertical-align: top; border-left: 1px solid #ddd; } td { border-top: 1px solid #ddd; } thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child { border-radius: 4px 0 0 0; } thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child { border-radius: 0 0 0 4px; } 
 
xxxxxxxxx
xxxxxxxxx
xxxxxxxxx
xxxxxxxxx
xxxxxxxxx
xxxxxxxxx

A través de mi experiencia personal, he descubierto que no es posible redondear las esquinas de una celda de tabla HTML con CSS puro. Redondeando el borde más externo de una mesa es posible.

Tendrás que recurrir al uso de imágenes como se describe en este tutorial , o similar 🙂

La mejor solución que he encontrado para esquinas redondeadas y otros comportamientos de CSS3 para IE <9 se puede encontrar aquí: http://css3pie.com/

Descargue el complemento y cópielo en un directorio en la estructura de su solución. Luego, en su hoja de estilo, asegúrese de tener la etiqueta de comportamiento para que se inserte en el complemento.

Ejemplo simple de mi proyecto que me da esquinas redondeadas, gradiente de color y sombra de caja para mi mesa:

 .table-canvas { -webkit-border-radius: 8px; -moz-border-radius: 8px; overflow:hidden; border-radius: 10px; -pie-background: linear-gradient(#ece9d8, #E5ECD8); box-shadow: #666 0px 2px 3px; behavior: url(Include/PIE.htc); overflow: hidden; } 

No se preocupe si su Visual Studio CSS intellisense le da el subrayado verde para las propiedades desconocidas, todavía funciona cuando lo ejecuta. Algunos de los elementos no están muy claramente documentados, pero los ejemplos son bastante buenos, especialmente en la página principal.

La respuesta seleccionada es terrible. Implementaría esto apuntando a las celdas de la mesa de esquina y aplicando el radio de borde correspondiente.

Para obtener las esquinas superiores, establezca el radio del borde en el primero y último del tipo de los elementos th , luego termine configurando el radio del borde en el último y el primero de tipo td en el último de tipo tr para obtener las esquinas inferiores.

 th:first-of-type { border-top-left-radius: 10px; } th:last-of-type { border-top-right-radius: 10px; } tr:last-of-type td:first-of-type { border-bottom-left-radius: 10px; } tr:last-of-type td:last-of-type { border-bottom-right-radius: 10px; } 

Para una tabla delimitada y desplazable, use esto (reemplace las 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:

 
1 2
3 4

CSS:

 table { border: 1px solid black; border-radius: 10px; border-collapse: collapse; overflow: hidden; } td { padding: 0.5em 1em; border: 1px solid black; } 

Puedes probar esto si quieres las esquinas redondeadas a cada lado de la mesa sin tocar las celdas: http://jsfiddle.net/7veZQ/3983/

 
AB
CD

Muestra de HTML

 
Table with rounded corners
Head1 Head2 Head3
tbody1 row1 tbody1 row1 tbody1 row1
tbody1 row2 tbody1 row2 tbody1 row2
tbody2 row1 tbody2 row1 tbody2 row1
tbody2 row2 tbody2 row2 tbody2 row2
tbody3 row1 tbody3 row1 tbody3 row1
tbody3 row2 tbody3 row2 tbody3 row2
Foot Foot Foot

SCSS, convertido fácilmente a CSS, usa sassmeister.com

 // General CSS table, th, td { border: 1px solid #000; padding: 8px 12px; } .round-corner { border-collapse: collapse; border-style: hidden; box-shadow: 0 0 0 1px #000; // fake "border" border-radius: 4px; // Maybe there's no THEAD after the caption? caption + tbody { tr:first-child { td:first-child, th:first-child { border-top-left-radius: 4px; } td:last-child, th:last-child { border-top-right-radius: 4px; border-right: none; } } } tbody:first-child { tr:first-child { td:first-child, th:first-child { border-top-left-radius: 4px; } td:last-child, th:last-child { border-top-right-radius: 4px; border-right: none; } } } tbody:last-child { tr:last-child { td:first-child, th:first-child { border-bottom-left-radius: 4px; } td:last-child, th:last-child { border-bottom-right-radius: 4px; border-right: none; } } } thead { tr:last-child { td:first-child, th:first-child { border-top-left-radius: 4px; } td:last-child, th:last-child { border-top-right-radius: 4px; border-right: none; } } } tfoot { tr:last-child { td:first-child, th:first-child { border-bottom-left-radius: 4px; } td:last-child, th:last-child { border-bottom-right-radius: 4px; border-right: none; } } } // Reset tables inside table table tr th, table tr td { border-radius: 0; } } 

http://jsfiddle.net/MUTLY/xqrgo466/

El siguiente es algo que utilicé y que me funcionó en todos los navegadores, así que espero que ayude a alguien en el futuro:

 #contentblock th:first-child { -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; behavior: url(/images/border-radius.htc); border-radius: 6px 0 0 0; } #contentblock th:last-child { -moz-border-radius: 0 6px 0 0; -webkit-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; behavior: url(/images/border-radius.htc); border-radius: 0 6px 0 0; } #contentblock tr:last-child td:last-child { border-radius: 0 0 6px 0; -moz-border-radius: 0 0 6px 0; -webkit-border-radius: 0 0 6px 0; behavior: url(/images/border-radius.htc); border-radius: 0 0 6px 0; } #contentblock tr:last-child td:first-child { -moz-border-radius: 0 0 0 6px; -webkit-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px; behavior: url(/images/border-radius.htc); border-radius: 0 0 0 6px; } 

Obviamente, la porción #contentblock puede ser reemplazada / editada según sea necesario y usted puede encontrar el archivo border-radius.htc haciendo una búsqueda en Google o en su navegador web favorito.

Este es css3 , solo el css3 reciente no IE <9 lo soportará.

Mira aquí , deriva la propiedad redonda para todos los navegadores disponibles

Agregar entre tags :

  

y en el cuerpo:

 
Noordwest   Noord   Noordoost
         
West   Centrum   Oost
         
Zuidwest   Zuid   Zuidoost

El color, el contenido y el formato de la celda son, por supuesto, por ejemplo;
se trata de espaciar celdas llenas de color dentro de un div. Al hacerlo, los bordes de la celda negra / borde de la tabla son en realidad el color de fondo div.
Tenga en cuenta que necesitará establecer el radio del borde div alrededor de 2 valores mayores que los radios del borde de la esquina de la celda por separado, para tomar un efecto de esquina redondeada y uniforme.

Lección en bordes de tabla …

NOTA: El código HTML / CSS a continuación solo debe verse en IE. ¡El código no se procesará correctamente en Chrome!

Necesitamos recordar eso:

  1. Una tabla tiene un borde: su límite exterior (que también puede tener un radio de borde).

  2. Las propias celdas TAMBIÉN tienen bordes (que también pueden tener un radio de borde).

  3. Los bordes de la tabla y la celda pueden interferir entre sí:

    El borde de la celda puede atravesar el borde de la tabla (es decir, el límite de la tabla).

    Para ver este efecto, modifique las reglas de estilo CSS en el siguiente código de la siguiente manera:
    yo. table {border-collapse: separate;}
    ii. Elimine las reglas de estilo que rodean las celdas de la esquina de la tabla.
    iii. Luego juegue con el espacio entre los bordes para que pueda ver la interferencia.

  4. Sin embargo, el borde de la tabla y los bordes de la celda se pueden COLAPSAR (usando: border-collapse: collapse;).

  5. Cuando se colapsan, los bordes de la celda y la mesa interfieren de una manera diferente:

    yo. Si el borde de la tabla es redondeado pero los bordes de la celda permanecen cuadrados, entonces la forma de la celda tiene prioridad y la tabla pierde sus esquinas curvas.

    ii. Por el contrario, si la celda de la esquina está curvada pero el límite de la tabla es cuadrado, verá una esquina cuadrada que bordea la curvatura de las celdas de la esquina.

  6. Dado que el atributo de la celda tiene prioridad, la forma de redondear las cuatro esquinas de la tabla es por:

    yo. Colapsando bordes en la tabla (usando: border-collapse: collapse;).

    ii. Establecer la curvatura deseada en las celdas de la esquina de la mesa.
    iii. No importa si las esquinas de la mesa son redondeadas (es decir: su radio de borde puede ser cero).

  .zui-table-rounded { border: 2px solid blue; /*border-radius: 20px;*/ border-collapse: collapse; border-spacing: 0px; } .zui-table-rounded thead th:first-child { border-radius: 30px 0 0 0; } .zui-table-rounded thead th:last-child { border-radius: 0 10px 0 0; } .zui-table-rounded tbody tr:last-child td:first-child { border-radius: 0 0 0 10px; } .zui-table-rounded tbody tr:last-child td:last-child { border-radius: 0 0 10px 0; } .zui-table-rounded thead th { background-color: #CFAD70; } .zui-table-rounded tbody td { border-top: solid 1px #957030; background-color: #EED592; } 
  
Name Position Height Born Salary
DeMarcus Cousins C 6'11" 08-13-1990 $4,917,000
Isaiah Thomas PG 5'9" 02-07-1989 $473,604
Ben McLemore SG 6'5" 02-11-1993 $2,895,960
Marcus Thornton SG 6'4" 05-05-1987 $7,000,000
Jason Thompson PF 6'11" 06-21-1986 $3,001,000

Agregue un envoltorio

alrededor de la tabla y aplique el siguiente CSS

 border-radius: x px; overflow: hidden; display: inline-block; 

a esta envoltura.