¿Cómo puedo tener un borde redondeado en mi mesa y un colapso de borde: colapsar?

tengo el siguiente:¿Cómo puedo tener un borde redondeado en mi mesa y un colapso de borde: colapsar?

<TABLE style="border-radius: 5px; border: 1px solid #999; xborder-collapse: collapse;"> 
    <THEAD> 
    <TR style="background-color: red;"> 
     <TH>Weekday</TH> 
     <TH>Date</TH> 
     <TH>Manager</TH> 
     <TH>Qty</TH> 
    </TR> 
    </THEAD> 
    <TBODY> 
    <TR> 
     <TD>Mon</TD> 
     <TD>09/11</TD> 
     <TD>Kelsey</TD> 
     <TD>639</TD> 
    </TR> 
    <TR> 
     <TD>Tue</TD> 
     <TD>09/12</TD> 
     <TD>Lindsey</TD> 
     <TD>596</TD> 
    </TR> 
    <TR> 
     <TD>Sun</TD> 
     <TD>09/17</TD> 
     <TD>Susan</TD> 
     <TD>272</TD> 
    </TR> 
    </TBODY> 
</TABLE>

Example

me gustaría tener bordes redondeados, sin espacio entre las células también tienen el área de cabecera encima de mi mesa de un color diferente. Pero parece que no funciona.

Creé este violín. Cuando comento un colapso de borde, obtengo los bordes redondeados pero los espacios entre las celdas. Cuando está dentro no obtengo ningún radio de borde ni espacio entre las celdas.

Actualización:

aquí parece ser la solución perfecta: Fiddle

Fuente

2012-01-17 Samantha J T Star

¿Ha mirado esto: http://stackoverflow.com/questions/4932181/rounded-table-corners-css-only. También hay un violín allí, y parece hacer lo que estás pidiendo. – PhillipKregg

Lo más cercano que encontré a una solución está aquí: http://jsfiddle.net/JWb4T/1/ –

Adición border-spacing:0 en lugar de border-collapse:collapse en su etiqueta de la tabla lo fija:

jsFiddle Demo

Fuente

2012-01-17 04:26:51 SpoonNZ

Esto casi lo arregla, pero aún hay alguna fuga de color si miras detenidamente :-( –

Ergh. Correcto. Creo que he tenido suerte aplicando el color bf al TH no TR y dándoles un radio de borde. Algunas reglas de estilo 'tr: first-child th: first-child: border-radius: 5px 0 0 0;' debería ayudar. Desordenado, pero creo que es efectivo – SpoonNZ

Oh, ¿y si le damos al elemento de Thead el radio y el fondo? Haría un violín pero el iPad no es bueno para codificar ... – SpoonNZ

Aquí hay un ejemplo usando un envoltorio div:

<div style="display: table; 
      padding: 2px; 
      border-radius: 5px; 
      border: 1px solid #999;"> 
    <TABLE style="border-collapse: collapse;"> 
    <THEAD> 
     <TR style="background-color: red;"> 
     <TH>Weekday</TH> 
     <TH>Date</TH> 
     <TH>Manager</TH> 
     <TH>Qty</TH> 
     </TR> 
    </THEAD> 
    <TBODY> 
     <TR> 
     <TD>Mon</TD> 
     <TD>09/11</TD> 
     <TD>Kelsey</TD> 
     <TD>639</TD> 
     </TR> 
     <TR> 
     <TD>Tue</TD> 
     <TD>09/12</TD> 
     <TD>Lindsey</TD> 
     <TD>596</TD> 
     </TR> 
     <TR> 
     <TD>Sun</TD> 
     <TD>09/17</TD> 
     <TD>Susan</TD> 
     <TD>272</TD> 
     </TR> 
    </TBODY> 
    </TABLE> 
</div>

Puede ver su funcionamiento aquí: jsFiddle

Nota: display:table; no se admite en Internet Explorer 7 y versiones anteriores. IE8 requiere un: !DOCTYPE en el documento. Sin embargo, todos los navegadores modernos (incluido IE9) lo admiten, por lo que no debería ser un problema.

Fuente

2012-01-17 04:31:18 vdbuilder

¿Cómo puedo tener un borde redondeado en mi mesa y un colapso de borde: colapsar?

Respuesta

Cuestiones relacionadas