Html table heading vertical text

Most common way of writing a HTML table with vertical headers?

Hi all it’s been a while since I’ve asked something, this is something that has been bothering me for a while, the question itself is in the title:

Header 1 data data data
Header 2 data data data
Header 3 data data data

First Option

First Way
 
Header 1
 
data
data
data
 
 
Header 2
 
data
data
data
 
 
Header 2
 
data
data
data
 
 
 

The main advantage of this way is that you have the headers right (actually left) next to the data it represents, what I don’t like however is that the

, and tags are missing, and there’s no way to include them without breaking the nicelly placed together elements, which lead me to the second option.

Second Option

 #vertical-2 thead,#vertical-2 tbody Second Way
 
 
Header 1
 
 
Header 2
 
 
Header 3
 
 
 
 
row 1
 
row 1
 
row 1
 
 
data
 
data
 
data
 
 
data
 
data
 
data
 
 
 
 
Footer
 
 
 
 

The main advantage here is that you have a fully descriptive html table, the drawbacks are that proper representation needs a bit of CSS for the tbody and thead tags and that the relation between the headers and data isn’t very clear as I had my doubts when creating the markup. So, both ways render the table how it should, here a pitcure:
With the headers on the left or right side if you would prefer it, so, any suggestions, alternatives, browser issues?

Источник

Vertical text for table headers with CSS

In complex tables with lots of columns you will run into the problem of headers being too wide and causing the table to stretch beyond the available width. One solution is to use vertical text to render the headers.

You can also achieve this using images, but by doing so you lose the benefits of text:

• selectable,
• resizable,
• easier to style and update,
• easier to dynamically generate.

With the CSS transform attribute it is possible to rotate things vertically.

For Internet Explorer version 8 and below you have to do it differently:

There are some caveats. Browsers usually apply the transform at the end, so we have to take this into account and adjust the width/height accordingly. If you don’t adjust the size of the container, its width/height will be the same as if the text wasn’t rotated.

In the case of a table we will use a div inside each table cell, so we have more control to style the outcome.

Due to the differences in rendering between IE8 and below and the others browsers we will use two different stylesheets.

Here is a screenshot of the final result:

PS: If you use this code in a local file in IE8, it will display a warning because of the filter that’s being used. You can enable it without problems. That warning is not displayed if you place the files in a server.

Источник

How to display vertical text in table headers with auto height / without text overflow?

I want to display rotated text as table headers, using the CSS transform property. The header row should adjust its height as needed, but instead the rotated text just overflows: demo fiddle My question is, how to get the table header to grow as needed? Essentially it should look like this:

12 Answers 12

.verticalTableHeader < text-align:center; white-space:nowrap; transform-origin:50% 50%; transform: rotate(90deg); >.verticalTableHeader:before < content:''; padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */ display:inline-block; vertical-align:middle; >

.verticalTableHeader < text-align:center; white-space:nowrap; transform: rotate(90deg); >.verticalTableHeader p < margin:0 -100% ; display:inline-block; >.verticalTableHeader p:before < content:''; width:0; padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */ display:inline-block; vertical-align:middle; >table

If you want table to still be able to grow from it’s content but not from width of , using a wrapper with a hudge negative margin opposite to dir/direction of document might do : apparently, the closest to your needs, http://jsfiddle.net/qjzwG/320/

  
First
 
Second-long-header
 
Third
  

.verticalTableHeader < text-align:center; white-space:nowrap; transform: rotate(90deg); >.verticalTableHeader p < margin:0 -999px;/* virtually reduce space needed on width to very little */ display:inline-block; >.verticalTableHeader p:before < content:''; width:0; padding-top:110%; /* takes width as reference, + 10% for faking some extra padding */ display:inline-block; vertical-align:middle; >table

 
 
First
 
Second
 
Third
 
 
foo
 
foo
 
foo
 
 
foo
 
foo
 
foo
 
 
foo
 
foo
 
foo
 
 
 

Источник

Vertical table headers in html

I would like the First column , Second column , Third column (or in other words, all the th elements of the custom-table ) texts to be non-bold, vertically written (+90° rotation counter-clockwise), vertically centered and horizontally centered within header cells. How to do that by modifying this document? Note: I don’t need backward compatibility with non-html5 browsers, I don’t want javascript, and I don’t want an external CSS. Here is an example of the kind of alignment I want:

@RichardHamilton I know. But this html is not for a website. I am writing an official document for a committee, and they want html file format (and no external file).

3 Answers 3

Edit: Just found out you wanted it rotated counter-colockwise. In that case use -90deg

To have text vertically written, you can use the transform: rotate(-90deg) property. The default font-weight for th elements is bold, so we need to override that, making the font-weight normal.

You should be able to get away with just transform, but depending on the browser, you might need to include vendor prefixes. This should be what you’re looking for

  /* Generally, you should put CSS in a separate file, but for the purpose of this post, I'm including it in the style tag. */ p, li < text-align: justify; >ins < background-color: #A0FFA0; >del < background-color: #FFA0A0; >.code < background-color: #EEEEEE; >.codex < background-color: #FFFFE0; >.custom-table < text-align: center; font-family: monospace; border-collapse: collapse; border-spacing: 0; >th < -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); width: 95px; font-weight: normal; >td, th < border: 1px solid black; >/* Can't eliminate the spacing no matter what I try */ th:first-child < height: 100px; >th:not(:first-child) < height: 10px; >td:nth-child(2), td:nth-child(3), td:nth-child(4)  
 
First column
 
Second column
 
Third column
 
 
First row
 
1
 
2
 
3
 
 
Second row
 
2
 
4
 
6
 
 
Third row
 
3
 
6
 
9
 
 
 

Edit: Got it to look more like the screenshot, but couldn’t figure out how to change the width of the cells. Looks like this is the best I can do for now

Источник

Table vertical header?

How can I make the table header appear on the left side of the table as a column instead on the top as a row? I have this markup:

6 Answers 6

Just use as the first element in the row. Then add the scope attribute, which has no visual impact, but you could use it e.g. in CSS.

I agree with this answer. Semantically, «th» is a «table header cell», and you are allowed to use it anywhere as «td» can.

Example

CSS

Update

Well, the 1, 2 should also be as column, obviously.

It also looks like IE baulks at this. You may have to trade semantic-ness for cross browser compatibility.

Update

If you have multiple rows that you want to become columns.

Made a minor modification to allow more «rows»: jsfiddle.net/kwfetzxf Also, both seem to work in IE11, Chrome and FF

You can see the result here. You mean like this?

 
 
 
Letters
 
 
a
 
b
 
 
 
 
Numbers
 
1
 
4
 
 
2
 
5
 
 
3
 
6
 
 
 
 

You usually use rowspan and colspan for cells spanning multiple columns/rows.

I needed something a little different, but the answers by @alex and @marion got me started in the right direction. The problem was that when you needed many items in the table, the «columns» started stacking funny on smaller screens.

Thanks to Serge for his answer here that led me in this solution. This solution allows for scrolling horizontally and doesn’t stack funny regardless of the size of the screen/window. I tested it in Chrome, Firefox, Opera, Edge, and IE11. Here’s the fiddle with the correct alignment for the new «rows» and «columns»: https://jsfiddle.net/berrym/6r3zvaef/21/

And just in case it disappears from JSFiddle:

 table < display:block; white-space:nowrap; width:100%; >td, th < border-bottom: 1px solid red; border-collapse: collapse; >thead < float: left; background: yellow; width: 10%; >thead tr < width:100%; float:left; >thead th < display: block; >tbody < float: left; width: 90%; >tbody tr < display: inline-block; >tbody td 
 
 
A
 
B
 
 
 
 
a1
 
b1
 
 
a2
 
b2
 
 
a3
 
b3
 
 
a1
 
b1
 
 
a2
 
b2
 
 
a3
 
b3
 
 
a1
 
b1
 
 
a2
 
b2
 
 
a3
 
b3
 
 
a1
 
b1
 
 
a2
 
b2
 
 
a3
 
b3
 
 
a1
 
b1
 
 
a2
 
b2
 
 
a3
 
b3
 
 
a1
 
b1
 
 
a2
 
b2
 
 
a3
 
b3
 
 
a1
 
b1
 
 
a2
 
b2
 
 
a3
 
b3
 
 
a1
 
b1
 
 
a2
 
b2
 
 
a3
 
b3
 
 
a1
 
b1
 
 
a2
 
b2
 
 
a3
 
b3
 
 
a1
 
b1
 
 
a2
 
b2
 
 
a3
 
b3
 
 
a1
 
b1
 
 
a2
 
b2
 
 
a3
 
b3
 
 
a1
 
b1
 
 
a2
 
b2
 
 
a3
 
b3
 
 
a1
 
b1
 
 
a2
 
b2
 
 
a3
 
b3
 
 
 
 

Источник