The following is a 3 x 3 table:
<html>
<body style="overflow:hidden;">
<style>
div.table_div {overflow:scroll;width:378px;height:117px;position:relative;}
table.TheTable {width:361px;height:100px;table-layout:fixed;border-collapse:collapse;border:1px solid #000000;}
td.TheTableColumnCell {text-overflow:ellipsis;overflow:hidden;white-space:nowrap;border:1px solid #000000;}
</style>
<div class="table_div" id="table_div">
<table class="TheTable">
<tr id='firstTr'>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
<tr>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
<tr>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
</table>
</div>
</body>
</html>
Of note:
a) The table width is 361px because: 119px for each cell (119 x 3 = 357). Then add 4px for the four borders.
b) The table height is 100px because: 32px for each cell (32 x 3 = 96). Then add 4px for the four borders.
c) The div tag. For my windows settings, the scrollbar width/height is 17px. This is why you see the div width and height 378px (361 + 17) and 117px (100 + 17). The purpose for the div is in case I actually have to scroll (in my 3×3 example, I don’t really have to).
In summary: This is a 3×3 fixed-width/height table. If you cut-and-paste that code into an html file and open it in your browser, you’ll see the scrollbars, but neither will actually allow you to scroll (because I have the widths/heights set to show everything without scrolling).
The problem:
Do the following:
Instead of making the height of each cell 32px, make them 16px. So, the height for table.TheTable should be changed to 52px (instead of 100px). The height for div.table_div should be changed to 69px (instead of 117px) – again, my scrollbar height is 17px.
The vertical scrollbar, while always visible, now scrolls. I can’t fit everything now? But I thought my calculations were correct? The magic number seems to be 22px. Less than 22px (height) I get a scrollbar that scrolls. Greater than 22px, I get a scrollbar that doesn’t scroll. If the div tag is correctly calculated, the scrollbars shouldn’t scroll. How do I avoid that for heights less than 22px?
EDIT: The overflow:scroll is necessary. I pulled this HTML out of a larger set a code. In the real code the table is much larger. The div tag allows me to show a certain amount of cells, and I can scroll to see the rest. It’s when I started playing with height’s less than 22px, that’s when I discovered the issue. As it messes with some other things I’m trying to do.
Your Problem has now become the font size/line height:
http://jsfiddle.net/EZ6q2/1/
You will need to reduce font size:
http://jsfiddle.net/EZ6q2/2/
or Line Height
http://jsfiddle.net/EZ6q2/3/
In Response To Your Comment
White space is still content and will count as text on a line. Completely emptying the cell also fixes the problem in Fire Fox. Be wary of this as some browsers my completely collapse empty cells (I’ve experienced this in some older browsers, IE 6 perhaps).
http://jsfiddle.net/EZ6q2/5/
A Little More Follow Up
The “padding” you refer to is the line height. From what I understand from the specs this is determined by metrics contained within the font its self and by default is a proportion of the font size, which is why changing the font size works. Changing the line height gives you an absolute result.
See this fiddle