What is the proper way to set a table cell width based on its contents?

[JimTrail]

.Question: What is the best way to set the widths of table columns/cells? Or more specifically is there a way to calculate a column/cell width that is based on the width of the contents? I am working on pricing grids for a web site. The web site is going to have many pricing grids. The pricing grids are going to have different numbers of columns. 1). The <div> container(s) below must have a width of the following: a). the sum total of the table cells/columns plus b). 20 pixels on either side of the <table> (for a total of 40 pixels wider than the <table>).2). Each of the table columns/cells must have the same width. In the style sheet I have got the font size set at 16 pixels.

 body{font-size: 16px;}

Also in the style sheet I have got the font size for the table set at 80%.

table{font-size: 80%;}

I could use a trial and error approach until I got a width that worked. That's kind of like hit or miss. I need to find the logical way of determining the cell width. That is, a bona fide way to determine a cell width which is based specifically on the number of digits/characters in the number(s) contained within the cell. This table is enclosed in a <div> container. The container must be 20 pixels wider than the table on the left and 20 pixels wider than the table on the right. The table columns/cells must each have the same width.

<div class="Container">  <table border="1">  <tr>  <td>$78.00;</td>  <td>$107.00</td>  <td>$1,055.00</td>  </tr>  </table></div>

This table is enclosed in a <div> container. The container must be 20 pixels wider than the table on the left and 20 pixels wider than the table on the right. The table columns/cells must each have the same width.

<div class="Container">  <table border="1">  <tr>  <td>$78.00;</td>  <td>$107.00</td>  <td>$705.00</td>  <td>$950.00;</td>  <td>$107.00</td>  <td>$1,267.00</td>  </tr>  </table></div>

This table is enclosed in a <div> container. The container must be 20 pixels wider than the table on the left and 20 pixels wider than the table on the right. The table columns/cells must each have the same width.

<div class="Container">  <table border="1">  <tr>  <td>$87.36</td>  <td>$119.84</td>  <td>$163.52</td>  <td>$224.32</td>  <td>$271.04</td>  <td>$337.12</td>  <td>$350.56</td>  <td>$456.96</td>  <td>$539.84</td>  <td>$601.44</td>  <td>$673.12</td>  <td>$840.00</td>  <td>$1,009.12</td>  <td>$1,181.60</td>  <td>$1,419.04</td>  </tr>  </table></div>

I would appreciate any help that anyone could provide. Thanks.

Edited April 4, 2013 by JimTrail

[Ingolme]

If all the columns have to have the same width then you're just going to have to go testing values until you find one that works. I'd take a value that's slightly larger than the longest number just in case some browsers show the font at a slightly different size. To make the container wider than the table, just give it a left and right padding of 20px. I'm not sure how you're going to prevent the container from taking the entire width of the screen, considering block elements do that by default. Setting display to inline-block or floating the element could solve it but both of those would give you horizontal stacking if you don't use styles on other elements to correct it.

[JimTrail]

Ingolme; Thanks for responding to my question. I figured out part of my problem. I can put a white border around the table 20 pixels wide on each side. That way I won't need a <div> container. I was wondering if I might could use ems for the cell widths and then calculate the em value based on the number of characters in the cell content. I tried using 16 pixels per 1 em for the width. That made my cell too wide. I may end up using a trial and error approach for the cell/column widths. Thanks again.