CODEWITHSUNDEEP
.nethtmlcssgrid
DavyR
DavyR

Reputation: 193

auto width & overflow div

I am creating some sort of grid for a project. The grid has one special requirement (that is the reason why we are trying to create one in house), the middle columns have to be scrollable.

To picture the situation: We created the grid more or less like this: There is a topcontainer div, that contains 3 other divs the left middle and right container. The left container contains user information divided over 4 columns. The middle div contains x columns (depending on how many weeks the manager selected) with textboxes where the hours for a certain employee can be entered, the right div has some columns for totals and averages.

To get to my question: The left columns that contain userdata should have a dynamic width, when I render the control with data from the server (asp.net 2.0) or when a row is added via javascript, and the user is picked, I want to left columns in the leftcontainer to automatically resize horizontally when needed, and that an extra scrollbar appears in the topcontainer (to avoid a vertical break up of my div) I figured that a 2nd topcontainer div with max width and the topcontainer div with overflow-x: scroll, + a width: auto in my columns should have done the trick, but that that doesn't seem to work.

Can anyone put me on the right track? I hope that my explanation is understandable. Anyway I added a picture [picture][1] Basically I want my left columns to adapt to the width of their content and to stick on the same level horizontally.

thx.

Upvotes: 0

Views: 936

Answers (1)

Jon Winstanley
Jon Winstanley

Reputation: 23311

I am a great advocate for table-less CSS design, but if you what you require is a table, use a table.

Here is some code where I think I have got you started.

I wanted to set the middle column to a % of the screen, but it then won't scroll. It expands to the size of the inner table.

I expet you'll need to add inner tables to each of the 3 columns to show your content.

<html>
<head>
<style>
table {
    width: 100%;
}
.left {
    background: red;
    width: 100px;
}
.right {
    background: blue;
    width: 100px;
}
.middle {
    background: green;
    width: 800px;
    display: block;
    overflow: scroll;
}
.inner {
    width: 2000px;
    height: 100px;
    background: black;
    display: block;
}
</style>
<body>
<table>
<tr><th class="left">Left</th><th class="middle">Middle Central block<table class="inner">Inner table</table></th><th class="right">Right</th></tr>
</table>
</body>
</html>

Upvotes: 1

Related Questions