setting width of table cell to 1/3 of the page

[Adam5000]

I've got a table with three cells in one row. And I'd like to set each to the same width. 1/3 of the page.

<table style="width: 100%;">
<tr>

<td style="width: 1/3 of the page">
</td>

<td style="width: 1/3 of the page">
</td>

<td style="width: 1/3 of the page">
</td>

</tr>
</table>

But as we all know, 1/3 is a repeating decimal that never ends. Is there a way to specifiy a table cell width as 1/3 of the page?

[swa66]

Most displays only have less than 2000px width. Moreover people on really large displays don't use full width windows in my experience.

Browser will round the result of any calculation to a pixel. Moreover some browsers are notoriously bad at math.

Hence there really is no need for infinite precision math, 33.3% will do fine for most uses as the error is far less than a pixel on any realistic browser width (the error is less than half a pixel up to 1500px wide).

Ah, and with css you can stop abusing tables for layout purposes.

[tangor]

Might I suggest "33%" instead of 1/3? Don't know of any browsers that recognize fractions as an attribute.

[malcolmcroucher]

width:33% or style="width:33%;" or set the table to 100px and work out the width to 33.3px

[rocknbil]

^ ^ ^ I think he meant 100%,. not 100px. :-)

But 100% is going to give some reeeealy wide and hard to read lines. Try implementing max-width.

If the math kills you, just make the center one 34%, or the outer's 34 and the inner 32. Optically the outer ones will look fine because of the margins.

Keep in mind, however, your widths will get pushed around if the content is unequal. Browsers follow the same mantra, "content is king" and will override markup in some cases.

<style type="text/css">
#my-table { width:100%; margin:auto; max-width:1024px; } /* or ems... */
#my-table td { width: 33%; }
#my-table #ctr { width: 34%; }
</style>

<table id="my-table">
<tr>
<td width="33%">&nbsp;</td>
<td id="#ctr" width="34%">&nbsp;</td>
<td width="33%">&nbsp;</td>
</tr>
</table>

If you're going to use a table, might as well apply the width attributes, will spare a lot of headaches.

[tangor]

I like the max-width attribute, but often I've seen errors creep in with some browsers where the window view is less than the max-width throw scroll bars. Leave max-width out and the tables always adjust to whatever the view. At least in my experience! YMMV!

[Adam5000]

Smile. If the results are off by less than one pixel, I think I can live with that.

Thanks to everyone who helped.