Setting table and cells width using CSS

[josecarlo]

Hello,
I want to get a table with two cells, but I'd like to set its width dimensions using styles only:

+++++++++++++++++++++++++++++++++
+ cell 1 + cell 2 +
+ + +
+++++++++++++++++++++++++++++++++

table width = Tw = browser width (100%)
cell1 width = C1w = 200px (fixed)
cell2 width = C2w = Tw - C1w

As you see, the table width has the width of the browser, even if I resize it. The first cell has a fixed width of 200px (always). Then second cell will have a variable width.
Using Html only, it is possible and very easy, but it seems impossible if I use CSS (at least in IE)

HTML example:
<table width="100%">
<tr><td width="200" nowrap>cell 1</td>
</tr>
<tr><td width="100%">cell 2</td>
</tr>
</table>

table-layout doesn't seem to be a good solution because when I resize the screen, the content of the second cell is clipped.

Thanks for your suggestions.





JOSE CARLOS ARAMBURU
josecarloaa@hotmail.com

 

[monksnake]

The way you have your example written in the picture, you have 2 cells in 1 row. In your code example, you have 1 cell each in 2 rows. Which way do you want your table to be?

<.

 

[josecarlo]

Uppss, you're right:

This is the right html:

<table width="100%">
<tr>
<td width="200" nowrap>cell 1</td>
<td width="100%">cell 2</td>
</tr>
</table>





JOSE CARLOS ARAMBURU
josecarloaa@hotmail.com

 

[mkrausnick]

Assuming you mean 1 row with 2 cells, as your picture indicates, you can specify a class selector for the fixed width. The CSS would be:

.fixed_cell { width:200px }
.elastic_cell { width:100% }

and the HTML would then become:

<tr>
<td class="fixed_cell">Left side</td>
<td class="elastic_cell">Right side</td>
</tr>

or you could have the just the first TD styled and leave the second TD unstyled, which would accomplish the same thing, since your table is specified as 100% width.

Mike Krausnick
Dublin, California

 

[jstreich]

Moreover, it sounds like your using the table for layout, which isn't technically correct. Tables are meant for tabular data, if it's not tabular, then it shouldn't be in a table.

[plug=shameless]

http://game-master.us/phpx-3.4.0/

[/plug]

 

[josecarlo]

About the example mkrausnick, I've already tried that and it doesn't seem to work (at least in IE), because when you shrink the browser's width there is a moment when the width of cell 1 will shrink too.
And you are right jstreich about your comment, the reason is because I've been trying to change some old pages that uses tables for layout, and I thought that it'd be as easy as finding a css equivalent for a html attribute .... I read something about CSS-layout but I haven't tried yet.




JOSE CARLOS ARAMBURU
josecarloaa@hotmail.com

 

[Vragabond]

I understand that I will helping a substandard solution, but I guess we cannot force you to adapt modern coding techniques of laying out via CSS if you do not want to. You need this:

<table style="width: 100%; [b]table-layout: fixed;[/b]">
 <tr>
  <td style="width: 200px;">One</td>
  <td>Two</td>
 </tr>
</table>

Of course, as said, this is a poor solution using a table layout.

 

[josecarlo]

Ok, but what if I need a table that has several columns containing data, but one of the columns needs to shrink or grow as you resize the browser window. The fixed columns may have numerical data, but the resizable column may have some text of variable length. In that case I'd like to keep the width of the numerical columns, but the text column can reduce or extent its width, wrapping its content if necessary.

Should I use CSS-layout in this case? is it even possible?


JOSE CARLOS ARAMBURU
josecarloaa@hotmail.com

 

[ChrisHunt]

The same principle applies as Vragabond has already laid out: You give the table a width of 100%. You give the fixed columns whatever width you want. You leave the fluid column with no width specified - it will resize to take up whatever space is left.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[sam0077]

Hello, I am facing a similar problem.

I am not a programmer/developer - I am simply trying to build a new website for my business. I also thought I could learn some basic XHTML and CSS for beginner work.

I have searched all over the Internet for the answer to this simple question:

How do I set up a layout in XHTML and in CSS where there are 4 bullet H3 headers on the left and a 437x317 image on the right. It is for the homepage.

I will not tell you how many hours I have searched for the answer to such a simple layout. I am embarrassed to admit it. So I joined your forum even thought I am not a programmer.

Thank you in advance for your help.

SIGNED: Trying the coding route and not the WYSIWYG route.

 

[josecarlo]

I'd already tried the code that Vragabond sent, but I found that when you use table-layout=fixed, the content of the second cell is clipped when you reduce the browser's width.
So far, I have found a possible solution that could be impractical in some scenarios:

<table style="width: 100%;">
<tr>
<td><table style="width: 200px;">
<tr><td>One</td>
</tr>
</table></td>
<td style="width: 100%;">Two</td>
</tr>
</table>

To keep the width of the first column fixed, I don't control it directly setting its width, I insert a new element instead, in this case another table with the desired width.

I couldn't found a better solution yet.


JOSE CARLOS ARAMBURU
josecarloaa@hotmail.com