You have to display the a inside the ths as a block-level element:
th a {
display: block;
}
Gumbo
2009-05-26 08:35:41
views:
190answers:
4
+6
A:
This allows me to use the 100% width without having to set float: left, but it doesn't seem to fix the 100% height..
Thomas Stock
2009-05-26 08:39:54
You need to give the TH elements a specific height. Because otherwise the TH’s height depends on the height of its children. And on the other hand children’s heights depend on their containing boxes, hence the TH elements.
Gumbo
2009-05-26 12:28:35
+1
A:
You need to set display:block on your links in the headers. height:width attributes are ignored on inline elements;
th a
{
display:block;
background-color: Fuchsia;
/* Making the headerlinks 100% width */
width:100%;
/* Making the headerlinks 100% height ??? */
height: 100%;
}
Edit: Forgot to mention that for 100% height to work, the parent needs to have a height specified, e.g.
th
{
height: 40px;
}
Jonathan Fingland
2009-05-26 08:37:36
This allows me to use the 100% width without having to set float: left, but it doesn't seem to fix the 100% height..
Thomas Stock
2009-05-26 08:40:01
@ edit: yes indeed, the parent needs the specific height. But I was hoping for a solution where that wasn't needed. Oh well, I'll just use this for javascript-disabled people and add a click event on the TH in javascript for the other 96% of the visitors :-)
Thomas Stock
2009-05-26 09:10:34
sounds like a good plan. Prototype or JQuery are good for making that easy on the JS side. Just loop through the children, find the largest height, and set all children to share that height. Just be careful when setting the heights that browser resizing is taken into account. You can use the onresize event (http://www.w3schools.com/jsref/jsref_onresize.asp) to determine when that should happen.
Jonathan Fingland
2009-05-26 10:57:00
A:
Probably not plausible, but in some cases setting
th {
white-space: nowrap;
}
Gets rid of the problem altogether.
rpflo
2009-05-26 22:16:14
A:
You could set an arbitrary height to each link to quite long: (6em maybe?) then set a max height on the table cell th's to something shorter: (3em?) with an overflow hidden. This way all the links will be taller than the table cell is high but chopped off by the overflow hidden - they should all be pink and clickable. Make sure you set a display:relative; on the th's otherwise old versions of IE won't chop off any overflow. Good luck :)
Matthew James Taylor
2009-05-27 05:22:10