html - sombra - Esquinas redondeadas mesa solo CSS

quebrar palabra css

Question

He buscado y buscado, pero no he podido encontrar una solución para mis necesidades.

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

Esquinas redondeadas para celdas de esquina y 1px borde 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 son redondeados!

¿Alguna solución?

Answer 1

Lección en bordes de tablas ...

NOTA: El código HTML / CSS a continuación 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 celdas en sí 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 perforar 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. tabla {border-collapse: separado;}
   ii. Elimine las reglas de estilo que redondean las celdas de la esquina de la tabla.
   iii. Luego juegue con el espaciado de los bordes para que pueda ver la interferencia.

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

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

   yo. Si el borde de la tabla está 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. A la inversa, si las celdas de la esquina son curvas pero el límite de la tabla es cuadrado, verá una esquina cuadrada fea que bordea la curvatura de las celdas de la esquina.

6. Dado que el atributo de esa celda tiene prioridad, la manera de redondear las cuatro esquinas de la mesa es, por lo tanto, mediante:

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

   ii. Configuración de la curvatura deseada en las celdas de la esquina de la tabla.
   iii. No importa si las esquinas de la tabla 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>

Answer 2

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

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

Answer 3

Añadir entre etiquetas <head> :

<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, los contenidos y el formato 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 deberá establecer el radio div-border-aproximadamente 2 valores mayor que el radio del borde de la esquina de la celda separada, para obtener un efecto de esquina redondeado suave.

Answer 4

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

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

a esta envoltura.

Answer 5

CSS:

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

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}

Answer 6

En primer lugar, necesitará más que solo -moz-border-radius si desea admitir todos los navegadores. Debe especificar todas las variantes, incluido el border-radius plano, 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 no muestra realmente un borde; simplemente establece cómo se ven las esquinas del borde, si hay una.

Para activar el borde, y así obtener sus esquinas redondeadas, también necesita el atributo de border en sus 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 a algunos navegadores antiguos no les gusta poner border-radius en las tablas / celdas de la tabla. Puede valer la pena colocar un <div> dentro de cada celda y estilizar ese 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, consulte a continuación)

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

[EDITAR]

Bueno, esto me estaba molestando, así que he hecho algunas pruebas.

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

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

Espero que ayude.

Answer 7

Es un poco tosco, pero aquí hay algo que compuse que está compuesto completamente de CSS y HTML.

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

Este ejemplo también utiliza la pseudo clase :hover 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 conseguido que :hover funcione correctamente para las filas completas <tr> . La última fila :hover no se muestra con esquinas redondeadas en la parte inferior. Estoy seguro de que hay algo simple que se pasa 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>

Answer 8

Esto es css3 , solo lo css3 reciente que no sea IE <9.

Echa un vistazo here , deriva la propiedad de la ronda para todos los navegadores disponibles

Answer 9

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, 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/

Answer 10

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, copie a un directorio en su estructura de 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, degradado de color y sombra de cuadro para mi tabla:

.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 inteligencia de Visual Studio CSS le da el subrayado verde para 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 primera página.

Answer 11

La respuesta seleccionada es terrible. Lo implementaría apuntando a las celdas de la tabla de la esquina y aplicando el radio del 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 tipo de 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;
}

Answer 12

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

Answer 13

Para mí, la solución de Bootstrap de Twitter se ve bien. Excluye IE <9 (sin esquinas redondeadas en IE 8 e inferior), pero creo que está bien, si desarrolla posibles aplicaciones web.

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>

Puedes jugar con eso aquí (en jsFiddle)

Answer 14

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>

Answer 15

Parece funcionar bien en FF y Chrome (no he probado otros) con bordes separados: http://jsfiddle.net/7veZQ/3/

Edición: Aquí hay una implementación relativamente limpia de tu 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>

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

Answer 16

Puede intentar esto si desea que las esquinas redondeadas de 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>