[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 '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