How to get a table to be fluid up to a max width,

Forum Moderators: not2easy

Message Too Old, No Replies

How to get a table to be fluid up to a max width,

with the outer cells fluid and the inner cell fixed?

MichaelBluejay

11:50 pm on Oct 10, 2010 (gmt 0)

I've got a three-column, single line table.

I want the middle cell fixed at 700px. That's the easy part.

If the window is wider than 700px, then I want to show the left and right cells, in equal amounts, up to 250px for each cell.

So if the window is wider than 1200px, then the columns are 250px, 700px, and 250px.

Is this possible without JavaScript? With JS I can find out the window width and then set the size of each cell directly. Without JS, I'm lost.

milosevic

9:31 am on Oct 11, 2010 (gmt 0)

If your table is only a single row, which not just use 3 divs? Then it will be easy to produce what you want to see.

MichaelBluejay

5:52 am on Oct 13, 2010 (gmt 0)

I'd rather not try to justify why I prefer tables, especially as no matter what I say those reasons will invariably be dismissed as insufficient. I would just really prefer to do this with Tables. However, if nobody knows how to do this with Tables, then I'll entertain a DIV-based solution, since I don't know how to do it with DIVs either.

sanji41

7:09 am on Oct 13, 2010 (gmt 0)

hi! it would be easy with div's. first put them in a wrapper, then create 3 (e.i.<div class="name">) and divide the width of the wrapper in 3.
hope this helps! give me a heads up if you didn't get it.

MichaelBluejay

8:29 am on Oct 13, 2010 (gmt 0)

I certainly know how to put three DIV's inside another DIV, but I still don't have a clue as to how to get the exact behavior I described in the original post.

sanji41

9:34 am on Oct 13, 2010 (gmt 0)

as long as the three div's are inside the wrapper, there shouldn't be a problem. you just need to declare the width of wrapper as 960px. it's safer in terms of different screen size.

milosevic

10:06 am on Oct 13, 2010 (gmt 0)

I've been trying to come up with a solution to this, but I can't see one.

All the times I've coded fluid layouts in the past, everything across the page horizontally has a percentage width - padding, margins, widths.

As soon as you stick things with a static width in there, the calculations of what a percentage width of the page is change when the window is resized and the combined width of elements no longer adds up = you get floats dropping.

sanji41

10:22 am on Oct 13, 2010 (gmt 0)

here it is:
body{
width:100%;
margin:0;padding:0;
}
#wrapper{
width:960px;
}
#div1{
width:300px;
float:left;
}
#div2{
width:300px;
margin-left:300px;
}
#div3{
width:300px;
float:right;
margin-right:40px;
}

<div id="wrapper">
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</div>

milosevic

10:35 am on Oct 13, 2010 (gmt 0)

Sanji41, that's a fully static width layout, it doesn't really help the OP who is asking for help on making a fluid layout.

MichaelBlueJay,

I don't know if you would have any luck with this - I've been meaning to look into this (CSS3 table displays) for a while:

[webdevelopmentbits.com...]

It's not that well supported yet but there's likely to be a JS file somewhere to reproduce it in older browsers.

This was the closest I could get to what you want, it allows a few pixels of resizing in exactly the way you want before the floats drop - maybe someone else can think of a way it could be worked around or improved.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<style type="text/css">

</style>
</head>

<body>

<div id="container">

<div class="column" id="left">

<div class="inner">
content
</div>

</div>
<div class="column" id="middle">

<div class="inner">
content
</div>

</div>
<div class="column" id="right">

<div class="inner">
content
</div>

</div>

</div>

</body>
</html>

sanji41

11:00 am on Oct 13, 2010 (gmt 0)

its a basic layout, you need some jquery to know the window size and run the following code.. saw this a couple of days ago, try to look for it.

MichaelBluejay

1:59 am on Oct 15, 2010 (gmt 0)

Well, I don't feel so bad now that I can't figure this out myself. Maybe there's no solution besides using JavaScript.

If so, in my opinion this is a big shortcoming of HTML and CSS. It ought to be possible with both, but it doesn't look like it's possible with *either*.

milosevic

8:42 am on Oct 15, 2010 (gmt 0)

Yeah, I think it's one for JavaScript, and I agree it's an annoying limitation. I'm still not fully convinced there's no way to do it though but maybe that's wishful thinking.

Especially frustrating because the code I posted does almost exactly what you want, only a few % more of allowable resize before the float drop and you could lock it down with a min-width at the narrower width.

milosevic

8:43 am on Oct 15, 2010 (gmt 0)

Whoops double post

SuzyUK

9:04 pm on Oct 19, 2010 (gmt 0)

very quick, but I think meets remit, at least in FF & IE

theory is to give the table a width to center it - 99% will do (this will only work if 99% of the screen resolution is equal or greater than 700px) - so presuming larger than 700px resolutions - then constrain the table with a max-width (1200px in your case) and a min width (700px) to meet the middle column width requirements.. then actually give the middle column (via <col> tag style or class) a 700px width.. You could put it on the td itself I presume but with the "auto" table layout format which this relies on, I think the cols width would be more stable, if the parser has to go over the cells to get the width it's likely to give the first column a min width depending on content - then 700px for the second col, then whatever is left over for the width of the third column?

anyway this is thoroughly untested and could probably done with divs (think Inline blocks would do it?)

try this.. does it fit with what might or might not be in the two side columns? (my widths are slightly different from what yours would be I wanted a more obvious test!)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
body {text-align: center; /* might be needed to center the whole table for old IEs */}

table {
width: 99%;
margin: 0 auto;
max-width: 1000px; /* 1200 for you */
min-width: 700px;
/*text-align: left; the contra for the old IE centering trick if you actually want the text aligned left of cells */
border-collapse: collapse;
}

table td {border: 1px solid #777;}
table .mid {width: 700px;}

</style>
</head>
<body>
<table summary="" cellspacing="0">
<colgroup>
<col span="1" class="side">
<col span="1" class="mid">
<col span="1" class="side">
</colgroup>

<tr>
<td>1</td>
<td>700px fixed</td>
<td>1</td>
</tr>
</table>
</body>
</html>

MichaelBluejay

10:05 pm on Oct 20, 2010 (gmt 0)

Thanks, SuzyUK! This *almost* works -- Safari doesn't respect max-width for tables, and it doesn't center in Safari either. But Safari does respect max-width for DIVs, so I just wrapped the table in a DIV. And I used antique <center> tags to center the whole thing. I know, they're deprecated, but they have the advantage of actually getting the job done. Below is my code.

I forgot to mention, the outer cells have no content, just background images. So I don't have to worry about the browser enlarging those cells in order to fit the content.

<style type="text/css" media="screen">
table {
width: 99%;
max-width: 1200px;
min-width: 700px;
border-collapse: collapse;
}

table td {border: 1px solid #777;}
table .mid {width: 700px;}
</style>

</head>
<body>

<center>
<div style="max-width:1200px">

<table cellspacing="0">
<colgroup>
<col span="1" class="side">
<col span="1" class="mid">
<col span="1" class="side">
</colgroup>

<tr>
<td background="images/spideyoncan.gif"></td>
<td>700px fixed</td>
<td background="images/spideyoncan.gif"></td>
</tr>
</table>

</div>
</center>