title: Struggling with overflow:hidden and percentage heights with HTML tables
body: <p>I have a CSS problem. I have a table who's width and height is a percentage of the window and would like cells' overflow hidden (vertically and horizontally). From research it seems pretty clear overflow doesn't play well with tables or percentage, but the fixes are especially buggy when I try to fix both at once.</p>
  
  <p>I'm open to other solutions for what I'm trying to make: a week x time calendar that crops long cell contents instead of stretching. (I'd like them to <code>text-overflow:ellipsis</code> too, haven't even gotten there yet.) I'd like the day/hour index row/col to be shorter/thinner than the other cells. I've thought about using a bunch of divs, but because 1. <code>display:block;</code> has generally broken the grid apart and 2. I'm struggling, I want to ask for help.</p>
  
  <p><a href="http://jsfiddle.net/Y7s4e/2/" rel="nofollow">http://jsfiddle.net/Y7s4e/2/</a></p>
  
  <p><a href="http://jsfiddle.net/Y7s4e/3/" rel="nofollow">http://jsfiddle.net/Y7s4e/3/</a></p>
  
  <p>(^the difference: <code>tr {display:block;}</code> vs <code>tr {display:inline-block;}</code>. The first makes trs "wrap" when the window->table shrinks and shift the rightmost cell to a row by itself. The second  instead hides the right cell when shrinking the window--I want to crop part of its contents, not leave a large blank column--and shifts the whole table relative to #encloser.</p>
  
  <p>^Those two are buggy and frustrate me, but they hide overflow instead of stretching the table, and the cells line up with each other. In the jfiddle closer to what I want to eventually build...</p>
  
  <p><a href="http://jsfiddle.net/FvfMG/1/" rel="nofollow">http://jsfiddle.net/FvfMG/1/</a></p>
  
  <p>...fiddling with the display of different classes either makes the table ignore that I want to restrict its height and overflow at all (delete <code>table, tr display:block</code> )
  or completely lose its grid structure (keep either <code>display:block</code> setting)
  or both (try <code>tr {display:inline-block;}</code> )
  But the CSS looks almost exactly like the less awful ones and I haven't been able to find the mistake.</p>
  
  <p>Structurally I have divs inside the tds  (I would prefer to use something like <code>td {display:inline-block}</code> but that doesn't yield the same result). I set display, overflow, height and width % for all table, tr, div, and td. I don't know where that's necessary, harmful, or useless. #encloser is a div to restrict the table size in jfiddle (I tried <code>table { display:block; height:n%; width:m%; }</code> and it made it not look like a table anymore; without <code>display</code> set, overflow stretched it). There are borders/backgrounds on some elements so it's easier to see what's going on.</p>
  
  <p>There is also a problem with borders and %s. If I have cell widths that add to 100% <code>td {width:25%;} [4 per row]</code>, the rightmost one will wrap/hide, I assume from extra pixels in borders. I think I've put up enough broken code, but I also get problems with borders not showing (cells shift and cover them up) and cellspacing when there should be none.</p>
  
  <p>Thanks for reading</p>