<th> compatibilidad text-align

En un encabezado de la tabla, la alineación del texto por defecto para la etiqueta th es central.<th> compatibilidad text-align

Considere el siguiente código:

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      body { 
       background-color: aliceblue; 
      } 
      .default_grid { 
       text-align: left; 
       width: 600px; 
       color: white; 
      } 
       .default_grid th { 
        /* text-align: left; */ 
       } 
       .default_grid .first { 
        background-color: purple; 
       } 
       .default_grid .second { 
        background-color: orange; 
       } 
     </style> 
    </head> 
    <body> 
     <table class="default_grid"> 
      <thead> 
       <tr> 
        <th class="first">Test One</th> 
        <th class="second">Test Two</th> 
       </tr> 
      </thead> 
     </table> 
    </body> 
</html>

En Firefox, Internet Explorer 7 (& inferior), Safari, Chrome y Opera el texto en < th> está alineado izquierda. Mientras que en Internet Explorer 8 y Internet Explorer 9, el texto se alinea centro a menos que se especifique la regla directamente en < th> tag (elimine el comentario de la línea # 14).

¿Cuál es el comportamiento correcto?

Fuente

2012-07-04 vulcan raven

Según

agentes de usuario visuales de Recommendation for TH, W3C típicamente rinda elementos TH vertical y horizontalmente centrado dentro de la célula y con un peso de la fuente negrita.

No hay ninguna mención de cómo se comportan necesidad (?) Ya sea o no que debe heredar el estilo de los padres?

hechos son:

Por defecto, todos los navegadores central centran texto en TH elemento.
Internet Explorador inferior, Firefox, Chrome, Safari y Opera establece el (único †) text-align propiedad de TH a hereda del padre <thead>, <table>, <body> y así en.
Internet Explorer 8 y más tarde no permite que el TH para heredar text-align propiedad de los padres. Tienes que orientar la etiqueta TH a través de un selector de CSS para cambiar su valor.
† Todos los navegadores no heredan el font-weight propiedad de los padres. Tienes que orientar la etiqueta TH a través de un selector de CSS para cambiar su valor.

Al mirar esta imagen, no podemos generalizar qué navegador está haciendo el trabajo correcto. Ya sea rechazando tanto text-align y font-weight para heredar el valor (Internet Explorador 8 y forma posterior) o "que permite a uno y dejando caer otra" (no Internet Explorador 8+ manera) es mejor ; está a discreción del vendedor.

ser un diseñador, una regla general es que debemos escoger aquellas prácticas que funcionan para todos los navegadores.En este caso, siempre elija TH para cambiar el valor de text-align y font-weight.

Fuente

2012-07-04 02:32:47

"Tiene que orientar la etiqueta TH a través de un selector de CSS para cambiar su valor" ... Esto funcionó. Gracias. –

Aunque la respuesta de @ vulcanraven fue esencialmente correcta cuando se publicó, la situación ha cambiado. La especificación HTML actual HTML5 describe la "representación esperada", que no es obligatoria pero puede considerarse implícitamente recomendada, y los proveedores de navegadores pueden, si así lo desean, reclamar su conformidad. Las reglas de "representación esperada" para th incluyen lo siguiente:

"Se espera que los agentes de usuario tengan una regla en su hoja de estilo del agente de usuario que coincida con los elementos que tienen un nodo primario cuyo valor calculado para la propiedad 'text-align' es su valor inicial, cuyo bloque de declaración consiste en una sola declaración que establece la propiedad 'text-align' en el valor 'center'. "

Esa es una forma bastante complicada de decir que los elementos th están centrados por defecto. (También es extraño, porque CSS no tiene forma de referirse al valor calculado para una propiedad de esa manera.) Pero realmente dice que se espera que esto se aplique solo si el elemento primario, es decir, un elemento tr, no tiene text-align establecido en diferir de left.

Sin embargo, muchos navegadores modernos no implementan esto. En Chrome y Firefox, las celdas están alineadas a la izquierda. Si prueba con una tabla simple sin CSS o atributos de presentación e inspecciona utilizando herramientas de desarrollo, puede ver que las celdas th están centradas, pero esto no se refleja en CSS; esos navegadores calculan las propiedades según las reglas de CSS (y no tienen reglas de hoja de estilo del navegador como se describe en "representación esperada"), pero si text-align no está configurado para un th, está centrado y text-align se muestra como center, como si fuera del cielo azul Esto significa que esos navegadores tienen reglas ad hoc que se ocupan del "centrado predeterminado". IE 11 parece implementar "representación sugerida" y muestra las celdas aquí centradas, pero no muestra en qué reglas de CSS se basa.

Fuente

2015-02-03 19:52:11

Respuesta

Cuestiones relacionadas