Table column header css

Rotated Table Column Headers

There are a couple of tricks here. We’re going to need to use transform: rotate() to angle the headers. Chrome/Safari lets you do that right on the

, but I had trouble with the text disappearing in Firefox that way, so let’s do that within a nested that we’ll force to be the width we want the column to be (it also didn’t work to force the cell narrow directly). We’re going to need another nested element as well, so…

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

Note the magic numbers there. I bet some of you are smart enough to figure out the mathematical relationship to all the other numbers going on in there. In fact, my example started out life as a fork of Jimmy Bonney’s Column Header Rotation article. I was able to do it without the skew() stuff he was doing which I think makes it a bit simpler, but he also had figured out some math stuff using tan() and cos() which might be a good starting point if you start digging in yourself.

If you go down this road, you might wanna make sure you aren’t applying rules that screw up the table if the transforms don’t work. Modernizr can test for that and apply support/non-support classes to the element, so you can write stuff like:

/* These aren't needed and will be weird if transforms don't work */ .csstransforms th.rotate

How you want to do the fallback is up to you, but it could be worse than just having the table be super wide: My final demo has this in place.

It’s in Sass in case you want to fork it and figure out some awesome way to use variables and math and stuff to make it more adaptable.

Источник

HTML Table Headers

HTML tables can have headers for each column or row, or for many columns/rows.

EMIL	TOBIAS	LINUS

8:00
9:00
10:00
11:00
12:00
13:00

MON	TUE	WED	THU	FRI
8:00
9:00
10:00
11:00
12:00

DECEMBER

HTML Table Headers

Table headers are defined with th elements. Each th element represents a table cell.

Example

Vertical Table Headers

To use the first column as table headers, define the first cell in each row as a element:

Example

Align Table Headers

By default, table headers are bold and centered:

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94

To left-align the table headers, use the CSS text-align property:

Example

Header for Multiple Columns

You can have a header that spans over two or more columns.

Name		Age
Jill	Smith	50
Eve	Jackson	94

To do this, use the colspan attribute on the element:

Example

You will learn more about colspan and rowspan in the Table colspan & rowspan chapter.

Table Caption

You can add a caption that serves as a heading for the entire table.

Monthly savings

Month	Savings
January	$100
February	$50

To add a caption to a table, use the tag:

Example

HTML Exercises

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

A table with both a sticky header and a sticky first column

High five to Cameron Clark who emailed me demoed this and showed me how cool it is. And indeed, Cameron, it is cool. When I shared that around, Estelle Weyl showed me a demo she made several years ago. That feels about right, Estelle is always a couple of years ahead of me.

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

These are cool solutions 🙂 Here is my take on this: http://hgsweb.de/sticky/index.html Sources are located at: https://github.com/napengam/sticky

I had a similar need some time ago, when I needed to build a product comparison table, and I realized that having the first column always visible can be problematic on small screens, where there isn’t enough space. Instead, I preferred adding the label as custom attribute and fetch it with CSS attr(). I did use horizontal stickiness too, though, for the intermediate sections. Here’s the respective pen and a more detailed explanation.

All browsers will support th/thead sticky by the end of the year. “you can’t position tr or thead” is not true in Firefox/Safari, and is a crbug.com/702927 in Chrome. Chrome’s table rewrite is almost done, and with it, sticky bug will be fixed.

Have you tried this out using any assistive tech (VoiceOver, JAWS, etc)? Historically, they don’t have a great time whenever you get CSS to do anything “elaborate” on a table and get confused. It looks a great attempt otherwise however.

Wayne, this works in JAWS, VO, and NVDA because the wrapper has an accessible name & appropriate role, and the table has no display properties overriding its semantics. TalkBack on Android is not so good. I filed a bug in December because this technique can cause trouble: TalkBack does not recognize tables in parents with tabindex. I have screen reader support notes in my post Under-Engineered Responsive Tables, explaining the attributes. For positioning in Safari you may need to use -webkit-sticky and the may misbehave as well (be sure to test). I go into more detail and outline workarounds in Fixed Table Headers.

You could set also 2nd column sticky, just need to know its position from the left. In other words, you need to know the size of the 1st column. I used custom CSS properties for “fixed” columns sizes. Then used JS to make “fixed” columns resizable by user. Works like a charm! 🙂

Источник