[thelist] css specs for table widths, td widths

shawn allen shawn at alterior.net
Thu Oct 17 13:34:01 CDT 2002


quoth Raymond Camden:
> What is the best way, using css, to specify that one table column
> should be as small as possible, ie, just as big as the text, and the
> right column as large as possible? All of this is within a table whose
> width is 90%:
>
> table.main {
> 	background-color: #ccff99;
> 	width: 90%;
> 	font-family: Arial;
> 	font-size: 12px;
> 	border: thin solid black;
> 	margin: auto;
> 	border-collapse: collapse;
> }
>
> By the way, if any of my CSS seems crazy, let me know.

Looks good. I'll refrain from making any comments on the absolute
font-size ;) As for the width stuff, I would recommend using the good
'ol (and rarely used or appreciated) colgroup and col elements:

<table>
    <colgroup>
        <col class="narrow" />
        <col class="wide" />
    </colgroup>
    <tr>
        <td>foo bar baz</td>
        <td>quux</td>
    </tr>
</table>

With the following styles:

col.narrow { width: auto; white-space: nowrap; }
col.wide { width: 99%; }

Works in IE/win (the contents of the narrow column are never wrapped,
and the wide one is as wide as possible). Gecko-derived browsers and
IE5/mac don't seem to honor the white-space property, unfortunately
(and using &nbsp;'s doesn't seem to help, either).

It might be better to assign a width to the narrow column instead, and
let the rest of them form their own widths. As with most table-related
issues, you can probably also achieve different effects using the HTML
attributes (in this case, <col width="" />).

--
shawn allen
  e: shawn at alterior.net
  p: 415 577 3961
  im: shawnpallen



More information about the thelist mailing list