Dynamic resizing of column width of html tables using CSS

Question

Note: I'm using a rendering engine to render my html to PDF that disables JavaScript by default, so I'm strictly looking for answers using *.css.

In my report I have a table used for accounting purposes with 11 columns:

• 1st column is for the counter (e.g. 1., 2., up to n.) that can range up to 3 digits.
• 2nd column is for the 12 digit reference number.
• 3rd column is for Address of the reference number on the previous column, that can be empty or at least 50 characters long.
• 4th to last column contains amount/currency/price data minimum value is 0.00 and the maximum can vary up to 8 digits with comma separated number grouping.

Now let's say the table's width needs to be 1024px (varies depending on the requirement provided by the *.pdf rendering engine). On that point, I want to:

• Automatically make 1st, 2nd, 4th to last column to compute their width based on their content (that makes same reports to have different column widths depending on the longest column content on the time of generation).
• The 3rd column will adjust accordingly to the remaining width left from the original 1024px and add ellipsis to the end of the line in case of overflow (important).

I tried to give each columns fixed width (with a total of 1024px), and I manage to use the ellipsis overflow through *.css but some space are wasted and I want to avoid these:

• I statically assigned each of 4th to last columns to 75px / 100px / 125px regardless whether the content is 0.00 or not (notice the 5th, 8th, 9th, and 10th column can be reduce to half of its original width).

Answer 1

What you could do it to give the width in %, but that will crash unless you set a min-width: in px something like.

//CSS
.col1{
  //the width you might need to play with it so it add up to 100% of the container
  width:5%;

  //this value will depend on the max nth number the table will display
  //plus it padding if you want some space form the number to the border
  min-width:20px;   
}
.container{
  width: 1024px;
  margin: auto;
}
#MyTable{
  width: 100%;
}

and do the same with all the other columns!!!!

also in the HTML add a container around the table

<div class="container">
  <table id="MyTable">
    <caption>table title and/or explanatory text</caption>
        <thead >
            <tr>
                <th id="col1">nth</th>
                <th id="col2">ID number</th>
                <th>Address</th>
                <th>Price 1</th>
                <th>Price 2</th>
                <th>Price 3</th>
                <th>...</th>
                <th>...</th>
                <th>...</th>
                <th>...</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>100</td>
                <td>201532112009</td>
                <td>Avenida Primera/ SOme address</td>
                <td>14.153,00</td>
                <td>0.00</td>
                <td>9.000</td>
                <td>and</td>
                <td>others</td>
                <td>others</td>
                <td>others</td>
            </tr>
        </tbody>
  </table>
</div>