All geek questions in one place

How to make diagonal headers on html tables

I am trying to create an HTML table with column headings, but each column heading has a long heading. I would like to make headings for each column at a diagonal angle. I want to know if there is css (or java, jquery, ect.) To achieve this effect, which will work on all browsers (firefox, IE7 & 8, ect ..) and how to implement it.

Here is a good example of what I would like to create. table with diagonal header headers

I found this on stackexchange, and I couldn't figure out how to use it correctly, or determine if it applied to what I wanted to do.

https://tex.stackexchange.com/questions/14288/how-combine-make-diagonal-column-heads-in-table-with-multicolumn-headers

+4
source share
3 answers

Wrap the text you want to make diagonal in another element, for example. a <div> , and then do CSS transform on this element; see MDN .

+1
source

try

  .vertical { writing-mode:tb-lr; -webkit-transform:rotate(-45deg); -moz-transform:rotate(90deg); -o-transform: rotate(90deg); white-space:nowrap; display:block; bottom:0; width:90px; height:120px; position:relative; left:90px; top:80px; }

see Working DEMO

Link

0
source

Use CSS 3 for modern browsers:

 -moz-transform:rotate(70deg); -webkit-transform:rotate(70deg); -o-transform:rotate(70deg); -ms-transform:rotate(70deg); transform(70deg);

and a filter for IE (unfortunately, I'm not sure if it is compatible with IE6 and how it works):

 filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5);

MSDN source: http://msdn.microsoft.com/en-us/library/ms532918(v=vs.85).aspx

0
source

Source: https://habr.com/ru/post/1436001/

More articles:


All Articles