Like the title says, I want to have a HTML table that allows its columns and rows to be sized independently from the cell content. If rows aren’t high enough or columns aren’t wide enough to show all of the cell’s content, then that content should simply disappear behind the cell.
I came up with the following solution which works fine in chrome (17) and opera (11.61), safari (5), IE (9) but not in firefox:
th, td {
position: relative;
overflow: hidden;
}
td > span {
position: absolute;
top: 0px;
}
th > div {
position: relative;
}
(The design is such that each td only contains a span and any “real” content, like text is inside the span within the td. Also, each row has an initial th, and there is a header row containing only th’s, and all these th’s contain a div. By setting explicit heights and widths of the DIV’s inside the th’s I can set the width and height of rows.)
The following HTML illustrates the example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>test</title>
<style type="text/css">
table {
border-width: 1px;
border-style: none none solid solid;
}
th, td {
border-width: 1px;
border-style: solid solid none none;
}
th > div {
height: 18px;
width: 50px;
}
th, td {
overflow: hidden;
position: relative;
}
td > span {
position: absolute;
top:0px;
}
th > div {
position: relative;
}
</style>
</head>
<body>
<table
cellspacing="0"
cellpadding="0"
style="font-size: 10pt"
>
<thead>
<tr>
<th><div>Header0</div></th>
<th><div>Header1</div></th>
<th><div style="width:25px">Header2</div></th>
</tr>
</thead>
<tbody>
<tr>
<th><div>Header1</div></th>
<td
style="
vertical-align: bottom
"
>
<span style="
font-size:6pt;
background-color: red;
">A</span>
</td>
<td>
<span style="
font-size:6pt;
background-color: blue;
">B</span>
</td>
</tr>
<tr>
<th><div>Header2</div></th>
<td>
<span style="
font-size:30pt;
background-color: yellow;
right: 0px
">C</span>
</td>
<td>
<span style="
font-size:30pt;
background-color: green;
">D</span>
</td>
</tr>
<tr>
<th><div style="height:10px">Header2</div></th>
<td>
<span style="
font-size:30pt;
background-color: yellow;
right: 0px
">E</span>
</td>
<td>
<span style="
font-size:6pt;
background-color: blue;
">F</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
This works fine in chrome and opera, which both position the span relatively to the td (that’s why I gave them position: relative). However, in firefox, the position:relative of the td’s is completely ignored, and the spans are positioned relative to the first ancestor above the table’s rows that have absolute or relative position. So with only the rules above, the tops of the spans are glued to the top of the document body, and if I add:
table {
position:relative
}
the tops of the spans are glued to the top of the table. But a position:relative applied to the tr’s or td’s seems to be completely ignored.
Any insight into a working solution will be greatly appreciated.
UPDATE
Firefox simply does not support position:relative on table cells. See https://bugzilla.mozilla.org/show_bug.cgi?id=35168#c11. IMO, this is a bug. Despite arguments that “the standard” says that the behavior of this setting is undefined, other browser seem to have zero trouble implementing this in a sensible and useful way so there really doesn’t seem to be any good reason from my perspective why firefox wants to ignore this de facto behavior.
After some experimentation, I came up with two alternative solutions – neither of them perfect – which may or may not be useful to others facing this same problem.
1) Using position:static for the table cells almost solves the problem in firefox (without changing the behavior in all other mentioned browsers). Howver, if you do give position:static to the table cells, a new problem surfaces when you set text-align:right on the the table cell. Whereas this again works fine in all other mentioned browsers (they render the span to the right within the cell), firefox again shows a different behavior, and shows the span to the right outside of the cell.
2) Use table-layout:fixed on the table, and put cell content directly in the cell (not in a separate span or div). You can then explicitly set the width and height in the style of the th elements (note that it is not enough to set the width/height of a div inside the th elements – you really need to do that on the th directly. This seems the approach taken by google docs spreadsheets. This approach allows the cell contents to be wider than the cell. However, you cannot make a table row less tall than the height of the cell content.
Firefox does not support position:relative on table elements. See this answer: Does Firefox support position: relative on table elements?
A workaround is to fill all the table cells with relatively positioned divs. The problem, as you have stated, is that you’d have to size all those divs individually. You can use some tricky CSS to streamline this:
http://jsfiddle.net/chad/9XwyX/2/
Or, you could add classes to the divs to represent each row and column:
http://jsfiddle.net/chad/9XwyX/3/
Neither is particularly clean, but they work in Firefox.