Encabezados de columna de tabla rotada | Programar Plus

Supongamos que tiene un encabezado de tabla (es decir, <th>) de “Número de especies de monos aulladores por país” y los datos en el correspondiente <td> es como “3”. Eso es un desajuste incómodo de ancho.

Incómodo

Quizás no sea un gran problema para dos columnas, pero si tuviera 20 sería muy difícil de navegar y un mal uso del espacio. Un mejor uso del espacio es rotar los encabezados para que el ancho de la columna sea mucho más estrecho.

Sin embargo, girar 90 grados es demasiado. Hace que sea difícil de leer.

Curiosamente, obtenemos casi la misma cantidad de ahorro de espacio si giramos los encabezados 45 grados, y son mucho más fáciles de leer.

El truco

Aquí hay un par de trucos.

Vamos a necesitar usar transform: rotate() para inclinar los encabezados. Chrome / Safari te permite hacerlo directamente en el <th>, pero tuve problemas para que el texto desapareciera en Firefox de esa manera, así que hagámoslo dentro de un anidado <div> que forzaremos a tener el ancho que queremos que tenga la columna (tampoco funcionó forzar la celda a estrecharse directamente). También vamos a necesitar otro elemento anidado, así que …

<th class="rotate"><div><span>Column header 1</span></div></th>
th.rotate {
  /* Something you can count on */
  height: 140px;
  white-space: nowrap;
}

th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(25px, 51px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 30px;
}
th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}

Tenga en cuenta los números mágicos allí. Apuesto a que algunos de ustedes son lo suficientemente inteligentes como para descubrir la relación matemática con todos los demás números que están ahí. De hecho, mi ejemplo comenzó como una bifurcación del artículo Column Header Rotation de Jimmy Bonney. Pude hacerlo sin el skew() cosas que estaba haciendo, lo que creo que lo hace un poco más simple, pero también había descubierto algunas cosas matemáticas usando tan() y cos() lo que podría ser un buen punto de partida si comienza a indagar en sí mismo.

Retroceder

Si sigue este camino, es posible que desee asegurarse de no aplicar reglas que arruinen la mesa si las transformaciones no funcionan. Modernizr puede probar eso y aplicar clases de soporte / no soporte a la <html> elemento, para que pueda escribir cosas como:

/* These aren't needed and will be weird if transforms don't work */
.csstransforms th.rotate {
  height: 140px;
  white-space: nowrap;
}

La forma en que quieras hacer el respaldo depende de ti, pero podría ser peor que tener la mesa súper ancha:

Mi demostración final tiene esto en su lugar.

Manifestación

Está en Sass en caso de que quieras bifurcarlo y descubrir una forma increíble de usar variables y matemáticas y demás para hacerlo más adaptable.