2011-06-17 10 views
35

tengo el siguiente código html:Cómo arriba, de izquierda a justificar el texto en una celda <td> que abarca varias filas

<table border="1"> 
    <tr> 
    <th>Month</th> 
    <th>Savings</th> 
    </tr> 
    <tr> 
    <td>January</td> 
    <td>$100</td> 
    </tr> 
    <tr> 
    <td>February</td> 
    <td rowspan="2">Save a lot</td> 
    </tr> 
    <tr> 
    <td>March</td> 
    </tr> 
</table> 

El uso de estilos CSS o cualquier otro método, puedo hacer que el texto "Guardar una gran cantidad" de arriba , justificado a la izquierda?

Respuesta

62
td[rowspan] { 
    vertical-align: top; 
    text-align: left; 
} 

Ver: CSS attribute selectors.

+2

a excepción del IE Bug (6/7/8) .. para IE debe ser específico sobre las filas abarcadas, en este caso 'td [rowspan = "2"] '- Aparentemente la configuración predeterminada de DTD **' 'es consi para que coincida con 'td [rowspan]' incluso cuando no se especifica explícitamente, por lo que coincide con ** ALL ** 'td''s - si debe o no es otra cosa, y esto también se aplica a' colspan' - [the larga historia] (http://www.highdots.com/forums/cascading-style-sheets/re-tables-colspan-298379.html) – clairesuzy

+0

Esto resolvió mi problema ... – Ziggler

7
<td rowspan="2" style="text-align:left;vertical-align:top;padding:0">Save a lot</td> 

Eso debería hacerlo.

+0

cuenta que esto no va a funcionar si quieres vertical-align: parte inferior, ya que se alinea con la fila al lado, no en la parte inferior de la celda de dos filas – user1260310

1

probar esto

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table, th, td { 
 
    border: 1px solid black; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<table style="width:50%;"> 
 
    <tr> 
 
     <th>Month</th> 
 
     <th>Savings</th> 
 
    </tr> 
 
    <tr style="height:100px"> 
 
     <td valign="top">January</td> 
 
     <td valign="bottom">$100</td> 
 
    </tr> 
 
</table> 
 

 
<p><b>Note:</b> The valign attribute is not supported in HTML5. Use CSS instead.</p> 
 

 
</body> 
 
</html>

uso valign = "top" para el estilo td

+0

atributo "valign" ya no se admite en HTML5. Use CSS "vertical-align", p. Ej. vertical-alinear: arriba; o vertical-alinear: parte inferior; –

Cuestiones relacionadas