Dynamic resizing of column width of html tables using css -

note: i'm using rendering engine render html pdf disables javascript default, i'm strictly looking answers using *.css.

in report have table used accounting purposes 11 columns:

• 1st column counter (e.g. 1., 2., n.) can range 3 digits.
• 2nd column 12 digit reference number.
• 3rd column address of reference number on previous column, can empty or @ least 50 characters long.
• 4th last column contains amount/currency/price data minimum value 0.00 , maximum can vary 8 digits comma separated number grouping.

now let's table's width needs 1024px (varies depending on requirement provided *.pdf rendering engine). on point, want to:

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

i tried give each columns fixed width (with total of 1024px), , manage use ellipsis overflow through *.css space wasted , want avoid these:

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

what give width in %, crash unless set min-width: in px like.

//css .col1{   //the width might need play add 100% of container   width:5%;    //this value depend on max nth number table display   //plus padding if want space form number border   min-width:20px;    } .container{   width: 1024px;   margin: auto; } #mytable{   width: 100%; } 

and same other columns!!!!

also in html add container around 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/ 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>