Esquinas de tabla redondeadas solo CSS

86

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

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

Bosquejo del diseño de la mesa

Esquinas redondeadas para las celdas de las esquinas y 1pxborde grueso 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 están redondeados!

¿Alguna solución?

html css html-table rounded-corners Vishal Shah
fuente
1
¿Ha intentado agregar un borde a los elementos TD usando moz-border-radius? Además, tenga en cuenta que esto no funcionará en IE, IE seguirá mostrando bordes rectos.
Fermín
Mirando las respuestas y sus comentarios, no está claro lo que quiere: ¿Dónde quiere las esquinas redondeadas? tabla, celdas de tabla, solo celdas en las esquinas de su mesa?
BiAiB
3
Supongo que es bastante obvio por el título de la pregunta, las esquinas de la mesa
Vishal Shah
@VishalShah +1 para una pregunta realmente útil. Estaba usando ciegamente una clase de esquina redondeada de jQuery UI diseñada para los widgets de UI, pero la apliqué a los elementos de la tabla y todo salió cuadrado. Así que ahora todavía puedo usar mi tema jQuery UI con un widget basado en tablas.
DavidHyogo

Respuestas:

90

Parece funcionar bien en FF y Chrome (no he probado ningún otro) con bordes separados: 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;
}
<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>
Expandir fragmento

http://jsfiddle.net/MuZzz/3577/

RoToRa
fuente
No es exactamente lo que estoy buscando. Si quita el relleno de la tabla y aplica el radio del borde solo a las celdas de las esquinas, obtendrá bordes de 2px de grosor, lo cual es feo. Más bien no tiene fronteras en absoluto.
Vishal Shah
3
Cerrar. Las celdas de las esquinas también necesitaban un radio de borde. jsfiddle.net/JWb4T/1 Aunque ahora ve un pequeño espacio entre el borde de las celdas de las esquinas y el borde de la tabla. Se puede arreglar reduciendo el radio del borde de las celdas de las esquinas. Gracias: D
Vishal Shah
Me alegro de que lo arregló. Tenga en cuenta que first-childy last-childno hacer el trabajo en IE6 / 7/8, pero menos de un problema para usted ya que tampoco lo hace border-radius. Significa que no podrá usar CSS3Pie para arreglarlo en IE; arreglará el radio del borde, pero no el primer / último hijo.
Spudley
Agregar border-collapse: separate;a la plantilla de Zurb Ink lo resolvió para mí.
Johan Dettmar
1
tal vez esto se veía bien hace 7 años, pero hoy los bordes de las celdas no se conectan con esta solución, por lo que se ve horrible.
rtaft
23

Para mí, la solución Bootstrap de Twitter se ve bien. Excluye IE <9 (sin esquinas redondeadas en IE 8 y versiones inferiores), pero creo que está bien, si desarrolla Web-Apps 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;
}
<table>
  <thead>
    <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  </thead>
  <tbody>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  </tbody>
</table>
Expandir fragmento

Puedes jugar con eso aquí (en jsFiddle)

Lars Schinkel
fuente
17

En primer lugar, necesitará algo más que -moz-border-radiussi desea admitir todos los navegadores. Debe especificar todas las variantes, incluidas las simples border-radius, de la siguiente manera:

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

En segundo lugar, para responder directamente a su pregunta, en border-radiusrealidad no muestra un borde; simplemente establece el aspecto de las esquinas del borde, si lo hay.

Para activar el borde, y así obtener sus esquinas redondeadas, también necesita el borderatributo en sus elementos tdy 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, debería ser un color de fondo diferente al del elemento circundante para que las esquinas redondeadas sean visibles sin un borde.

Vale la pena señalar que a algunos navegadores más antiguos no les gusta colocar border-radiustablas / celdas de tabla. Puede valer la pena poner un <div>dentro de cada celda y darle estilo. Sin embargo, esto no debería afectar a las versiones actuales de ningún navegador (excepto IE, que no admite esquinas redondeadas en absoluto, ver más abajo)

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

[EDITAR]

Bien, esto me estaba molestando, así que hice algunas pruebas.

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

Parece que lo fundamental que te faltaba estaba border-collapse:separate;en el elemento de la tabla. Esto evita que las celdas unan sus bordes, lo que les permite recoger el radio del borde.

Espero que ayude.

Spudley
fuente
Para mantener el código al mínimo, he omitido las cosas entre navegadores. Si le doy un borde a td y th, no están redondeados. Tengo bordes rectos. Podría proporcionar un código CSS de muestra para una tabla sin css aplicado, lo que demostraría lo que está diciendo.
Vishal Shah
@Vishal Shah: he actualizado mi respuesta después de hacer algunas pruebas. Espero que ayude.
Spudley
Su ejemplo muestra un radio de borde para TODAS las celdas, donde, como lo quiero, solo para las celdas de esquina. Esto es lo que estaba buscando: jsfiddle.net/JWb4T/1
Vishal Shah
@Vishal Shah: entendí que el problema era la falta de redondeo en cualquier lugar de la mesa, en lugar de específicamente qué partes de la tabla deberían redondearse. Sin embargo, me alegro de que lo hayas resuelto al final (parece que la border-collapse:separate;sugerencia fue útil al final)
Spudley
+1 para ese colapso de borde: punta separada. Eso realmente me ayudó.
DavidHyogo
12

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

Para obtener las esquinas superiores, establezca el radio del borde en el primer y último tipo de los elementos th , luego termine estableciendo el radio del borde en el último y el primero del tipo td en el último del 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;
}
Luke Flournoy
fuente
Esto es mucho mejor que todas las otras respuestas ... ¡Es increíblemente simple y elegante!
Eric Cote
¡Me alegro de haber podido ayudar!
Luke Flournoy
Esto funciona muy bien, pero tengo otra tabla con thelementos en la parte superior e izquierda de la tabla y esto no funciona para eso. ¿Cómo hago para redondear las esquinas de ese tipo de mesa?
nenur
7

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

Descargue el complemento, 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 extraiga el complemento.

Ejemplo simple de mi proyecto que me da esquinas redondeadas, degradado 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 intellisense CSS de Visual Studio le da el subrayado verde para propiedades desconocidas, todavía funciona cuando lo ejecuta. Algunos de los elementos no están claramente documentados, pero los ejemplos son bastante buenos, especialmente en la portada.

Patrick Rodríguez
fuente
6

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

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

Kyle
fuente
1
+1, y lo mismo aquí, recientemente he intentado lograr esto, pero sin suerte. Tuve que poner dentro un <div>. ^^,
tomsseisums
4

Es un poco tosco, pero aquí hay algo que armé y que se compone completamente de CSS y HTML.

  • Esquinas exteriores redondeadas
  • Fila de encabezado
  • Varias filas de datos

Este ejemplo también hace uso de la :hoverpseudoclase para cada celda de datos <td>. Los elementos se pueden actualizar fácilmente para satisfacer sus necesidades y el desplazamiento se puede desactivar rápidamente.

(Sin embargo, todavía no he logrado :hoverque funcione correctamente para filas completas <tr>. La última fila flotante no se muestra con esquinas redondeadas en la parte inferior. Estoy seguro de que hay algo simple que se está pasando por alto).

table.dltrc {
  width: 95%;
  border-collapse: separate;
  border-spacing: 0px;
  border: solid black 2px;
  border-radius: 8px;
}

tr.dlheader {
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  padding: 2px
}

td.dlheader {
  background: #d9d9d9;
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  border-radius: 0px;
  padding: 2px
}

tr.dlinfo,
td.dlinfo {
  text-align: center;
  border-left: solid black 1px;
  border-top: solid black 1px;
  padding: 2px
}

td.dlinfo:first-child,
td.dlheader:first-child {
  border-left: none;
}

td.dlheader:first-child {
  border-radius: 5px 0 0 0;
}

td.dlheader:last-child {
  border-radius: 0 5px 0 0;
}


/*===== hover effects =====*/


/*tr.hover01:hover,
tr.hover02:hover {
  background-color: #dde6ee;
}*/


/* === ROW HOVER === */


/*tr.hover02:hover:last-child {
  background-color: #dde6ee;
  border-radius: 0 0 6px 6px;
  }*/


/* === CELL HOVER === */

td.hover01:hover {
  background-color: #dde6ee;
}

td.hover02:hover {
  background-color: #dde6ee;
}

td.hover02:first-child {
  border-radius: 0 0 0 6px;
}

td.hover02:last-child {
  border-radius: 0 0 6px 0;
}
<body style="background:white">
  <br>
  <center>
    <table class="dltrc" style="background:none">
      <tbody>
        <tr class="dlheader">
          <td class="dlheader">Subject</td>
          <td class="dlheader">Title</td>
          <td class="dlheader">Format</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">One</td>
          <td class="dlinfo hover01">Two</td>
          <td class="dlinfo hover01">Three</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Four</td>
          <td class="dlinfo hover01">Five</td>
          <td class="dlinfo hover01">Six</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Seven</td>
          <td class="dlinfo hover01">Eight</td>
          <td class="dlinfo hover01">Nine</td>
        </tr>
        <tr class="dlinfo2 hover02">
          <td class="dlinfo hover02">Ten</td>
          <td class="dlinfo hover01">Eleven</td>
          <td class="dlinfo hover02">Twelve</td>
        </tr>
      </tbody>
    </table>
  </center>
</body>
Expandir fragmento

K. Parker
fuente
Esta debería ser la respuesta aprobada. ¡Gracias!
encarnado
1

Agregue un <div>envoltorio alrededor de la tabla y aplique el siguiente CSS

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

a esta envoltura.

Ubby
fuente
1

Para adaptar la brillante respuesta de @luke flournoy, y si no está usando then su tabla, aquí está todo el CSS que necesita para hacer una tabla redondeada:

.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.my_table tr:first-of-type {
  border-top-left-radius: 10px;
}

.my_table tr:first-of-type td:last-of-type {
  border-top-right-radius: 10px;
}

.my_table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}

.my_table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}
libre mundo
fuente
0

Para una tabla con bordes y desplazable, use esto (reemplace variables, $textos iniciales)

Si usa thead, tfooto th, simplemente reemplácelos tr:first-childy tr-last-childy 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>
brauliobo
fuente
0

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

<table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
</table>
Younes Hadry
fuente
0

HTML de muestra

<table class="round-corner" aria-describedby="caption">
    <caption id="caption">Table with rounded corners</caption>
    <thead>
        <tr>
            <th scope="col">Head1</th>
            <th scope="col">Head2</th>
            <th scope="col">Head3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
        </tr>
    </tfoot>
</table>

SCSS, fácilmente convertido a CSS, use 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/

Leandro Barbosa
fuente
0

Lo siguiente es algo que usé y que funcionó para mí 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 #contentblockparte se puede reemplazar / editar según sea necesario y puede encontrar el border-radius.htcarchivo haciendo una búsqueda en Google o en su navegador web favorito.

Ansipantes
fuente
0

Es decir css3, solo los navegadores recientes que no sean IE <9 lo admitirán.

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

BiAiB
fuente
4
css3please no hace nada por border-radius en IE. Si desea piratear IE para que admita border-radius, consulte css3pie.com
Spudley
Me refiero específicamente a la propiedad redondeada de una tabla, no a ningún otro elemento.
Vishal Shah
0

Agregar entre <head>etiquetas:

<style>
  td {background: #ffddaa; width: 20%;}
</style>

y en el cuerpo:

<div style="background: black; border-radius: 12px;">
  <table width="100%" style="cell-spacing: 1px;">
    <tr>
      <td style="border-top-left-radius: 10px;">
        Noordwest
      </td>
      <td>&nbsp;</td>
      <td>Noord</td>
      <td>&nbsp;</td>
      <td style="border-top-right-radius: 10px;">
        Noordoost
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>West</td>
      <td>&nbsp;</td>
      <td>Centrum</td>
      <td>&nbsp;</td>
      <td>Oost</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom-left-radius: 10px;">
        Zuidwest
      </td>
      <td>&nbsp;</td>
      <td>Zuid</td>
      <td>&nbsp;</td>
      <td style="border-bottom-right-radius: 10px;">
        Zuidoost
      </td>
    </tr>
  </table>
</div>

El color de la celda, el contenido y el formato son, por supuesto, por ejemplo;
se trata de espaciar las celdas llenas de color dentro de un div. Al hacerlo, los bordes negros de la celda / borde de la tabla son en realidad el color de fondo div.
Tenga en cuenta que deberá establecer el div-border-radius en aproximadamente 2 valores mayores que los radios del borde de la esquina de la celda separada, para obtener un efecto de esquina redondeada suave.

Paul Schuddebeurs
fuente
0

Lección sobre bordes de tabla ...

NOTA: El siguiente código HTML / CSS debe verse solo 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:
    i. table {border-collapse: separado;}
    ii. Elimine las reglas de estilo que rodean las celdas de las esquinas de la tabla.
    iii. Luego juegue con el espaciado de bordes para que pueda ver la interferencia.

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

  5. Cuando se contraen, los bordes de la celda y la tabla interfieren de forma diferente:

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

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

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

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

    ii. Establecer la curvatura deseada en las celdas de las esquinas de la tabla.
    iii. No importa si las esquinas de la mesa están 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;
			}
			<table class="zui-table-rounded">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Height</th>
					<th>Born</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>DeMarcus Cousins</td>
					<td>C</td>
					<td>6'11"</td>
					<td>08-13-1990</td>
					<td>$4,917,000</td>
				</tr>
				<tr>
					<td>Isaiah Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>$473,604</td>
				</tr>
				<tr>
					<td>Ben McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>$2,895,960</td>
				</tr>
				<tr>
					<td>Marcus Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>$7,000,000</td>
				</tr>
				<tr>
					<td>Jason Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>$3,001,000</td>
				</tr>
			</tbody>
		</table>
Expandir fragmento

IqbalHamid
fuente
-1

CSS:

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

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}
Goran Vasic
fuente
Explique detalladamente su solución
Srivats Shankar
@SrivatsShankar Escribí esto hace mucho tiempo, así que a juzgar por este -1, supongo que ya no funciona. Mi punto era agregar "border-radius" a la <table>, y luego "overflow: hidden" escondería los bordes externos de <td>. Supongo que podrías intentar agregar "border-radius", "border" y "overflow: hidden" a <div> que es un contenedor para <table>, y luego agregar bordes dentro de cada <td> (I haría el primer y último elemento de cada fila / columna sin el borde exterior, porque <div> tendrá un borde redondeado, como en la imagen)
Goran Vasic
lo suficientemente justo. Eso tiene sentido. No da el resultado exacto solicitado, pero veo su punto. Si pudiera editar su respuesta, puedo modificar mi puntuación. :-)
Srivats Shankar