tbody td borders not scrolling with content in tbody overflow:auto;
I am unable to get the borders of these td's to follow their rows as I scroll through this overflow:auto; <tbody>. Any ideas on a fix?
Note: Setting table-layout:fixed or making rows display:block isn't an option as the rows will lose their fluidity..
You can see the issue in the latest Firefox, so I assume it's messed up elsewhere.
Here is a test I setup (scroll to the bottom for the demo): http://www.webdevout.net/test?01y
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<table>
<thead><th>One</th><th>Two</th><th>Three</th></thead>
<tbody>
<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</t开发者_高级运维d></tr>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
</tbody>
</table>
</body>
</html>
CSS:
table {width:100%;border-collapse:collapse;}
tbody {height:200px;overflow:auto;}
td {border-bottom:1px solid #f00;}
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.
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.
加载中,请稍侯......
精彩评论