Dynamic column width in tables

**PFunk** · 03-01-2006 04:40 PM

Hi,

I have a series of tables on a page which have a text label on the left and a form input (could be any of text, checkbox, drop down) and the behaviour I would like is:

- The width of the left column is dictated by the text in that column, i.e. it will expand as wide as it can before hitting the form input to fit the text, or will wrap tightly around the text if there is very little.

Using nowrap and setting the left column width to a low percentage almost works, but pushes the form inputs off the page.

**the tree** · 03-01-2006 04:51 PM

If what you want is perfectly aligned labels/inputs then look at this article and scroll down to FORM(s) and Function.

While you're there, note why tables for layout are not recomended.

**PFunk** · 03-01-2006 05:19 PM

Cool, cheers.

So how exactly do I achieve my desired result using CSS?

**the tree** · 03-01-2006 05:37 PM

If you what you want really isn't what was in that article then the only thing that I can think of is a not particuarly graceful solution, that doesn't work in IE.
But I'm srue your sollution is around.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Form</title>
<style type="text/css">
div#labels,div#inputs{
float: left;
}
div#labels label, div#inputs input{
height: 25px;
display: block;
}
* html div#labels label{
width: 150px;
}

</style>

</head>
<body>
<form action="login.php" method="post" id="loginform">
<div id="labels">
<label for="name">Your name:</label>
<label for="email">Your e-mail address:</label>
<label for="pass">Your password:</label>
</div>
<div id="inputs">
<input type="text" id="name">
<input type="text" id="email">
<input type="password" id="pass">
</div>
</form>
</body>
</html>

**PFunk** · 03-01-2006 05:38 PM

does that no make the labels column a fixed width of 150px?

**the tree** · 03-01-2006 05:56 PM

Only in Internet Explorer. Modern browsers ignore "* html" because it implies "html when it is contained by any other element" which it isn't, but IE doesn't understand this.
Take out those line and you'll see the even bigger mess that IE makes.

**felix_the_cat** · 03-15-2006 06:13 PM

Hello all!

I've been reading the articles in the links above about using CSS and margins to replace a lot of table usage. They still say to use tables sometimes, and the examples of good design that I looked at still had moderate table usage to layout the content.

The trick is, how do I know when I'm using tables excessively?

I know basic HTML and I'm revamping this website http://www.ntf.com.au ... if you look at some of the inside pages the entire content is laid out in tables and there is only about 5 lines in the CSS they use.

What should i be avoiding when it comes to tables and still be able to give the pages a well branded look and feel?

Your patients is appreciated!

Felix
=)

**ray326** · 03-15-2006 10:32 PM

Basically, if the content you're marking up is tabular data then that's where you use a table. For page layout you should always use CSS.

Thread: Dynamic column width in tables

Thread Tools

Display

Dynamic column width in tables

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions