tbody td borders not scrolling with content in tbody overflow:auto;
Posted
by tester
on Stack Overflow
See other posts from Stack Overflow
or by tester
Published on 2010-05-17T21:31:19Z
Indexed on
2010/05/17
21:50 UTC
Read the original article
Hit count: 273
I am unable to get the borders of these td's to follow their rows as I scroll through this overflow:auto; . 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</td></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;}
© Stack Overflow or respective owner
