ansaurus

Question

tbody td borders not scrolling with content in tbody overflow:auto;

Answer 1

+1 A:

Also doesn't work in IE. This sums it up nicely: "the overflow property, as defined by CSS 2.1 specification, section 11.1.1, does not apply to table-row-group objects."

There are a couple of workarounds here, as detailed in this recent question on SO. The link from the OP has two interesting solutions, the first of which may work for you if you can't change the output. It basically involves wrapping the table in two divs, setting the inner div to overflow: auto, and absolutely positioning the thead relative to the outer div so it gets pulled out of the inner container.

Andrew 2010-05-17 21:41:31

I'm aware of the cross browser issues with this method. I'm trying to figure out why the borders are not scrolling in Firefox 3.6.

tester 2010-05-17 21:46:58

FYI: it works in IE7. It does not work in FF 3.6, it works in Safari 4.0.4. Very strange.

Marco Demajo 2010-05-17 21:51:34

My point is that the borders are not scrolling because it's not supposed to work (as per the spec). The fact that it works at all is the odd behavior here...

Andrew 2010-05-18 13:55:25

Answer 2

A:

Not sure why the funky behavior occurs in FF, but a solution is to create two tables and put the second one inside a div.

HTML:

<table>
 <thead>
  <th>One</th><th>Two</th><th>Three</th>
 </thead>
</table>
<div>
 <table>
  <tr><td>Item</td><td>Item</td><td>Item</td></tr>
  <tr><td>Item</td><td>Item</td><td>Item</td></tr>
  <tr><td>Item</td><td>Item</td><td>Item</td></tr>
 </table>
</div>

CSS:

table {width:100%;border-collapse:collapse;}
div {height:200px;overflow:auto;}
th {width:33%;}
td {border-bottom:1px solid #f00;width:33%;}

I added specific widths to the ths and tds to ensure the columns aligned since they're in different tables, but you might not have to specify.

mVChr 2010-05-17 22:01:58

Interesting work-around, but when the tables are populated by external sources, editing the html structure is usually not a possibility (e.g. drupal view table output). Also, I believe the fact that this loses cell fluidity as well as cell width synchronization between thead and tbody will make this a nonviable option.

tester 2010-05-17 22:08:37

ansaurus

tags:

views:

answers:

tbody td borders not scrolling with content in tbody overflow:auto;

related questions