The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Adjacent Tables Overflow div boundaries
joehesse
post Jul 5 2018, 08:18 AM
Post #1





Group: Members
Posts: 7
Joined: 5-July 18
Member No.: 26,667



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 5 2018, 10:17 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 01:38 AM