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).

T04435 · Accepted Answer · 2015-08-17 12:09:49Z

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>

edited Aug 17, 2015 at 12:09

answered Aug 17, 2015 at 4:12

T04435

14.3k5 gold badges60 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gideon Over a year ago

Where should I assign it, to the <thead> or to the <tbody>?

T04435 Over a year ago

I will say the tbody will inherit the width of the thead of its col... so go with thead... I will be able to give you a better answer if i could see the code

Collectives™ on Stack Overflow

Dynamic resizing of column width of html tables using CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related