Cómo hacer que los encabezados de tabla html abarcan múltiples líneas

Question

Tengo algunas cabeceras de tabla como:

<table> 
    <tr> 
     <th> 
      Invoice Number 
     </th> 
     <th> 
      Invoice Date 
     </th> 

... 

Estoy deseando conseguir las diferentes palabras en diferentes líneas en las cabeceras de modo que hice esto:

<table> 
    <tr> 
     <th> 
      Invoice<br />Number 
     </th> 
     <th> 
      Invoice<br />Date 
     </th> 

... 

Esto funciona pero no estoy seguro si obedece las mejores prácticas. He escuchado en una transmisión por Internet que ya no deberías usar <br /> y no debes usar etiquetas para formatear cómo se ve tu salida, pero debes usar css para poder cambiarlo más fácilmente.

¿Alguien puede sugerir una mejor manera de hacer esto?

Answer 1

Puede intentar poner un div dentro del th con un estilo de ancho y altura específico para forzar la segunda palabra hacia abajo.

Answer 2

Puede establecer el ancho para todas sus cabeceras de tabla con esto:

th {width: 60px;} 

o puede asignar una clase por lo que acaba de hacer algunos de ellos más estrecha:

th.narrow {width: 60px;} 

Puede ajuste el tamaño y el ancho de la fuente según sea necesario.

Solo una nota al margen: no olvide agregar el alcance para la accesibilidad. Si los datos están por debajo de las celdas de encabezado a continuación, utilizar

<th scope="col"> 

y poner los XX en una sección de la culata en T y las células td en la sección tbody. Si las células de cabecera están en el lado izquierdo de la mesa y las células relacionadas con esas cabeceras son hacia la derecha, luego usar

<th scope="row">. 

Answer 3

podría codificar como:

<table> 
    <tr> 
     <th> 
      <div>Invoice</div><div>Number</div> 
     </th> 
     <th> 
      <div>Invoice</div><div>Date</div> 
     </th> 

... 

Aunque francamente, no ve nada incorrecto con el uso de la etiqueta <br />.

Answer 4

Puede establecer word-spacing en un tamaño suficientemente grande. Personalmente, probablemente dejaría que no se envolviera.

Esperaba poder encontrar una propiedad de CSS específicamente para forzar la rotura en espacios en blanco, pero no lo hice (en una búsqueda cursory). En caso de que sus ojos sean mejores que los míos: http://w3.org/tr/css3-text/