I have two tables in separate divs, the divs display left to right because of css floats.
The tables are big, both in the number of headings and the number of rows.
I want the two tables to stay within their respective divs and have horizontal and vertical scroll bars to navigate the table.
Below is my unsuccessful attempt to get what I want. The html has been validated.
Any help or pointers would be greatly appreciated.
Joe
---------------------- cut here
<!doctype html>
<html>
<head>
<title>Testing</title>
<style>
.box {
float: left;
width: 45%;
margin: 1em;
border-style: solid;
text-align:left;
padding: 1em;
}
.after-box {
clear: left;
margin: 1em;
border-style: solid;
padding: 1em;
}
table {
table-layout:fixed;
width:100%;
height:50%;
font-size: medium;
border-collapse: collapse;
overflow:auto;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Testing</h1>
<div class="box">
<table>
<tr>
<th>ABC123</th>
<th>DEF456</th>
<th>GHI789</th>
<th>JKL012</th>
<th>MNO345</th>
<th>PQR678</th>
<th>STU890</th>
</tr>
<tr>
<td>xxxxxxxxxxxxxxxxxxxx</td>
<td>yyyyyyyyyyyyyyyyyyyy</td>
<td>xxxxxxxxxxxxxxxxxxxx</td>
<td>yyyyyyyyyyyyyyyyyyyy</td>
<td>xxxxxxxxxxxxxxxxxxxx</td>
<td>yyyyyyyyyyyyyyyyyyyy</td>
<td>xxxxxxxxxxxxxxxxxxxx</td>
</tr>
</table>
</div>
<div class="box">
<table>
<tr>
<th>ABC123</th>
<th>DEF456</th>
<th>GHI789</th>
<th>JKL012</th>
<th>MNO345</th>
<th>PQR678</th>
<th>STU890</th>
</tr>
<tr>
<td>xxxxxxxxxxxxxxxxxxxx</td>
<td>yyyyyyyyyyyyyyyyyyyy</td>
<td>xxxxxxxxxxxxxxxxxxxx</td>
<td>yyyyyyyyyyyyyyyyyyyy</td>
<td>xxxxxxxxxxxxxxxxxxxx</td>
<td>yyyyyyyyyyyyyyyyyyyy</td>
<td>xxxxxxxxxxxxxxxxxxxx</td>
</tr>
</table>
</div>
<div class="after-box">
Mollis pretium lorem primis senectus habitasse lectus scelerisque donec, ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque, consectetur mi risus molestie curae malesuada *beep*. Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes, mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus nibh est, metus lobortis morbi cras magna vivamus per risus fermentum. Dapibus imperdiet praesent magnis ridiculus congue gravida curabitur dictum sagittis, enim et magna sit inceptos sodales parturient pharetra mollis, aenean vel nostra tellus commodo pretium sapien sociosqu.
</div>
</body>
</html>
The normal behavior for tables is to expand to fit their content, unless you use CSS/javascript tricks like this one: http://www.christianjacobsson.se/scrollable-table.html
Or you might let the container DIVs have scrollbars, but that could make it hard to overview the tables.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)