resizable table

Bootstrap bill · Jun 23, 2004

I want a table like this

+---------------------------------------------------------+
| row one
|
+---------------------------------------------------------+
|
|
| row two
|
|
|
+---------------------------------------------------------+
| row three
|
+---------------------------------------------------------+

Row's one and three will be a fixed height. I want row two to fill up
whatever is left of the window, and the height should change when the window
is resized. I would prefer a method that is cross platform. Can I do this
without code?

Mitja · Jun 23, 2004

Bootstrap bill said:
I want a table like this

+---------------------------------------------------------+
+---------------------------------------------------------+

Row's one and three will be a fixed height. I want row two to fill up
whatever is left of the window, and the height should change when the
window is resized. I would prefer a method that is cross platform.
Can I do this without code?

"Wthout code"? Now _that_ will be a tough one

Use something like
<style type="text/css">
html,body,table {height:100%}
tr.bar {height:5em;}
</style>
<table>
<tr class="bar"><td>foo</td></tr>
<tr><td>foo</td></tr>
<tr class="bar"><td>foo</td></tr>
</table>

The preferred way to do it is with divs, though:
<body style="padding: 150px 0">
<div style="position:absolute;top:0;left:0">header</div>
text foo bar
<div style="position:absolute;bottom:0;left:0">footer</div>
</body>

Both untested, but should work.

If you don't understand what I wrote (HTML&CSS, I mean, not this text), read
a tutorial on CSS. It's a must. Well... a should

Neal · Jun 23, 2004

The preferred way to do it is with divs, though:
<body style="padding: 150px 0">
<div style="position:absolute;top:0;left:0">header</div>
text foo bar
<div style="position:absolute;bottom:0;left:0">footer</div>
</body>

One problem is if the user is on a monitor set for 450px high, the center
section is awfully small. You could impose scrolling on it.

Another problem is if the header material is larger than 150px. Resizing
text can cause this problem.

I think the design idea is flawed from the start, frankly, but there are
ways of getting it to work the way the OP wants - unfortunately, all
result in usability problems and/or an ugly design in some environments.

Whitecrest · Jun 23, 2004

I think the design idea is flawed from the start, frankly, but there are
ways of getting it to work the way the OP wants - unfortunately, all
result in usability problems and/or an ugly design in some environments.

But ugly design doesn't matter. It makes no difference what the
presentation looks like as long as the user can read the content....
Content and content alone will keep the customer, presentation is
meaningless...

Yes, I was being sarcastic, and factious at the same time.

derek giroulle · Jun 23, 2004

Mitja said:
<div style="position:absolute;bottom:0;left:0">footer</div>

sorry to disappoint you mitja but that will not work in the way intended
by bill

Bill, you could go and look at www.Glish.com and look at the 3-collumn
solution for inspiration and turn it 90 degreesto fit your problem

but from what you wrote as intended use - I will make some assumptions
and sorry if I'm wrong about them - you have the following problem :

1- you don't know how big the "rest"of the window is in advance because
it depends on screen resolution
2- and you don't know how big the window is the users browser is working on
3- you don't know in advance how much information in going to be in the
middle part

If we assume we don't care about the first 2 questions and only take
account of the answer to 3 the the only problem is when row two
contains more data lines then screen space ...
what do you want to happen in that case :
- you could want your footer row to move down off the screen
In that case you can let the size of your data determine the size of row
2 and in case there isn't any row 3 moves up to sit just under row 1

- or to remain at the bottom of the screen floating over row 2
see how Z-index works in CSS to achieve the effect
but I warn you in advance its not obvious and the outcome unpredictable

I incorporated that information in the header ( row 1) and I abandonned
the idea of floating that info at the bottom it KISS

derek

Mitja · Jun 24, 2004

Neal said:
One problem is if the user is on a monitor set for 450px high, the
center section is awfully small. You could impose scrolling on it.

My fault - I should have tested it. It only renders in Opera as intended.
IE and Firefox put div.header at the bottom of the _viewport_. I've never
used bottom:0 in practice so I must say I was quite surprised to see this. I
expected the behavior from the specs, at least from Firefox: "In the
absolute positioning model, a box is explicitly offset with respect to its
containing block." But then, if things were done as per spec, you shouldn't
get the behavior OP wanted when text doesn't fill the viewport.
What have I overlooked?

Another problem is if the header material is larger than 150px.
Resizing text can cause this problem.

Agreed. Should be 5em or something.

Mitja · Jun 24, 2004

derek giroulle said:
sorry to disappoint you mitja but that will not work in the way
intended by bill

You're right, of course. Sorry for having talked off the top of my head. See
also my response to Neal.

Bill, you could go and look at www.Glish.com and look at the
3-collumn solution for inspiration and turn it 90 degreesto fit your
problem

but from what you wrote as intended use - I will make some
assumptions and sorry if I'm wrong about them - you have the
following problem :

1- you don't know how big the "rest"of the window is in advance
because it depends on screen resolution
2- and you don't know how big the window is the users browser is
working on 3- you don't know in advance how much information in going
to be in the middle part

If we assume we don't care about the first 2 questions and only take
account of the answer to 3 the the only problem is when row two
contains more data lines then screen space ...
what do you want to happen in that case :
- you could want your footer row to move down off the screen
In that case you can let the size of your data determine the size of
row 2 and in case there isn't any row 3 moves up to sit just under
row 1

Since OP mentioned tables, I think this was the desired behavior. The
quasi-solution with tables I suggested serves the purpose better, but it
doesn't work in IE, only FFox&Opera

I also don't know the level of support for html,body,table.main
{height:100%} in older browsers. Not to mention it's not particularly nice
from the semantic point of view.

Bootstrap bill · Jun 24, 2004

Bootstrap bill said:
I want a table like this

I'd like to thank everyone for their quick responses. I found a solution to
my problem and will post the URL to my site in a few days.

Thanks again!

-Bill

Whitecrest · Jun 24, 2004

I'd like to thank everyone for their quick responses. I found a solution to
my problem and will post the URL to my site in a few days.

Oh sure you will.... You come here, and just take, take, take, and give
nothing. Then just like that you leave. Oh sure, you say you will
return with a url, but we both know the truth. The minute you leave
this forum some other fancy forum will catch your eye, and you will
never be back...

What about the children? Did you think about them?

Responsive width SVG image with fixed height rectangle at left and bottom - see my pen	0	Nov 26, 2022
Duplicate ID issue when trying to copy table row	1	Jul 30, 2022
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
How to Create a random password generator in a separate window	4	May 26, 2022
How can I create a table using the input element?	1	Mar 25, 2022
How to add dropdown selected data to table using jquery	2	Jul 2, 2022
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023
Need total amount displayed of data-price attribute from each table	2	Jul 3, 2022

resizable table

Bootstrap bill

Mitja

Neal

Whitecrest

derek giroulle

Mitja

Mitja

Bootstrap bill

Whitecrest

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads