fixed-width column and variable-width columns mixed

S

ssk

Hi,

I want to have a table with 3 columns.
The table's width is 100%.
1st column's width should be 100 px.
The other 2 columns are variable-width but they should be the same.

One option is that:
Table: 100%
1st column: 100 px
2nd column: 50%
3rd column: 50%

That might work but I don't think it's way to go.

What's the best way to do that?

Thanks.

Sam
 
D

dorayme

"ssk said:
Hi,

I want to have a table with 3 columns.
The table's width is 100%.
1st column's width should be 100 px.
The other 2 columns are variable-width but they should be the same.

One option is that:
Table: 100%
1st column: 100 px
2nd column: 50%
3rd column: 50%

That might work but I don't think it's way to go.

If you want the table to be as wide as the container and you want
the left 100px and the rest divided evenly, why is it not the way
to go? We are talking all loose here, not getting down to the
html really but still...
 
D

dorayme

dorayme said:
If you want the table to be as wide as the container and you want
the left 100px and the rest divided evenly, why is it not the way
to go? We are talking all loose here, not getting down to the
html really but still...

If 100px is taken away then the rest is not 50% and 50%
of-the-whole-table. Sorry! OK, there are various ways to go but I
just want to say this before anyone notices further!
 
D

dorayme

"ssk said:
Hi,

I want to have a table with 3 columns.
The table's width is 100%.
1st column's width should be 100 px.
The other 2 columns are variable-width but they should be the same.

One option is that:
Table: 100%
1st column: 100 px
2nd column: 50%
3rd column: 50%

That might work but I don't think it's way to go.

What's the best way to do that?

This is one way to go:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
</head>
<body>
<table style="width:100%;margin:0;padding:0;"><tr>

<td style="width:100px;">jashdfjkdsh</td>

<td>
<table style="width:100%;margin:0;padding:0;"><tr>
<td style="width:50%;">jashdfjkdsh</td>
<td style="width:50%;">hgjjhghjg mmmm nnn jkgkjh</td>
</tr></table>
</td>

</tr></table>
</body>
</html>

No doubt there is better still.
 
B

Ben C

Hi,

I want to have a table with 3 columns.
The table's width is 100%.
1st column's width should be 100 px.
The other 2 columns are variable-width but they should be the same.

One option is that:
Table: 100%
1st column: 100 px
2nd column: 50%
3rd column: 50%

That might work but I don't think it's way to go.

It probably does work. But you've asked for an inconsistent set of
things and letting the UA decide according to its arbitrary rules which
you care about the least. As you say, not a good way to do.

What's the best way to do that?

Just set 100px on the first column and leave the other two to auto.

If the table itself has a width (100%) the UA will divide the extra
space evenly between the auto width columns.

Not sure where/if this is specified (that's the problem with tables),
but try it in all your browsers.
 
J

Jukka K. Korpela

Scripsit ssk:
I want to have a table with 3 columns.

Consider a different approach. The odds are that you are using a table for
layout only and should take a more approach instead.
The table's width is 100%.

Sounds like a layout table. For a real table, for presenting tabular data,
there's seldom any reason to ask for 100% width no matter what the canvas
is.
1st column's width should be 100 px.

Sounds like a layout table with navigation bar squeezed into 100 px. Don't
use px widths. You cannot know what the most suitable (to a user) font size
is, so you cannot possibly know how many pixels you need for a word.
The other 2 columns are variable-width but they should be the same.

You _could_ use

<table border width="100%" style="table-layout: fixed">
<tr><th width="100">foo</th><th>bar</th><th>barbar</th></tr>

etc.

You don't set widths for other rows, since the widths are calculated from
the widths of the first row cells anyway, due to table-layout: fixed. A
browser would divide the remaining width evenly between the 2nd and the 3rd
column.

As usual, usual caveats apply, but this works even on rather old browsers
like IE 6. (Whether it works depends mainly on browser support to the CSS
property table-layout.)

The usual caveats include the principle that CSS often works when you
wouldn't actually want it to work if you knew all the facts. Using
table-layout: fixed and setting the width of a column to 100 pixels (in CSS
or in HTML), you _really_ get (on conforming browsers) a 100 pixels wide
column, even if this means brutally cutting (procrusteanating) the content
of a cell. Try this with
<th width="100">Supercalifragilisticexpialidocious</th>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top