2012-03-26 8 views
7

¿Me gustaría saber cómo crear esquinas redondeadas en un cabezal de tabla solamente?Cómo crear esquinas redondeadas en Table Head solamente

Detalles adicionales ... Quiero tener una cabeza encaminada de la mesa, el resto de la tabla es un rectángulo, solo la primera fila del encabezado debe tener las esquinas redondeadas.

+1

¿Has probado algo por tu cuenta? –

+0

sí border-radius pero en vano funciona en divs pero no en los encabezados de tabla – Astronaut

+0

'thead' element? 'th' elementos? ¿El 'caption' de la tabla? Se puede llamar a muchas cosas diferentes el encabezado de la tabla. – MetalFrog

Respuesta

21

El problema es que usted necesita para tomar las ciertos elementos internos ronda.

Así que tienes que hacer la primera y la última ronda para obtener la solución deseada.

table th:first-child{ 
    border-radius:10px 0 0 10px; 
} 

table th:last-child{ 
    border-radius:0 10px 10px 0; 
} 
+0

Eso es exactamente lo que estaba buscando. – Astronaut

+0

Como seguimiento, ¿cómo configuro el con, así que tengo un encabezado delgado. – Astronaut

+0

Estoy un poco confundido. Cuando estás hablando de delgado, tengo la altura en la cabeza, ¿por qué quieres establecer el ancho? –

3

Hay una serie de opciones. Depende de lo que realmente quieras lograr visualmente.

Pero asegúrese de que border-collapse NO esté configurado para contraerse, porque eso no funcionará. Para obtener más información, consulte este enlace Mozilla: https://developer.mozilla.org/en/CSS/border-radius

#uno, 
 
#due th, 
 
#tre th { 
 
    border-top-right-radius: 10px; 
 
    border-top-left-radius: 10px; 
 
    border: 1px solid black; 
 
} 
 
#tre td { 
 
    border: 1px solid black; 
 
}
<table id="uno" border="0"> 
 
    <tr> 
 
    <th>Header 1</th> 
 
    <th>Header 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>row 1, cell 1</td> 
 
    <td>row 1, cell 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>row 2, cell 1</td> 
 
    <td>row 2, cell 2</td> 
 
    </tr> 
 
</table> 
 

 
<br> 
 

 
<table id="due" border="1"> 
 
    <tr> 
 
    <th>Header 1</th> 
 
    <th>Header 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>row 1, cell 1</td> 
 
    <td>row 1, cell 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>row 2, cell 1</td> 
 
    <td>row 2, cell 2</td> 
 
    </tr> 
 
</table> 
 

 
<br> 
 

 
<table id="tre" border="0"> 
 
    <tr> 
 
    <th>Header 1</th> 
 
    <th>Header 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>row 1, cell 1</td> 
 
    <td>row 1, cell 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>row 2, cell 1</td> 
 
    <td>row 2, cell 2</td> 
 
    </tr> 
 
</table>

+0

colapso de borde !!! ¡Gracias por el consejo! – noru