CSS technique for adjustable column width in HTML tables

Question

CSS technique for adjustable column width in HTML tables

Important Note: The HTML to PDF rendering engine I am using disables JavaScript by default, so I am seeking solutions that utilize CSS only.

Within my report, there is a table utilized for accounting purposes featuring 11 columns:

The first column serves as a counter (e.g. 1., 2., up to n.) and may span up to 3 digits.
The second column houses a 12-digit reference number.
The third column displays the address corresponding to the reference number in the previous column; this field can be empty or contain at least 50 characters.
The remaining columns contain data related to amount, currency, or price, with values ranging from 0.00 to a maximum of 8 digits separated by commas.

Assuming the width of the table needs to be set to 1024px (subject to the requirements of the PDF rendering engine), my objective is to:

Dynamically adjust the widths of the first, second, and fourth to eleventh columns based on their content, resulting in varying column widths depending on the longest content present during generation.
For the third column, it should adapt to the remaining space within the original 1024px width, adding an ellipsis to indicate overflow if necessary (crucial).

I initially attempted to allocate fixed widths to each column totaling 1024px, successfully implementing ellipsis overflow through CSS. However, undesired white spaces were observed, prompting the need for optimization:

Specifically, I set static widths of 75px / 100px / 125px for the fourth to eleventh columns, irrespective of whether the content was 0.00 or not. Notably, certain columns such as the fifth, eighth, ninth, and tenth could potentially have their widths reduced by half. https://i.stack.imgur.com/wSsBK.png

html css html-table

Answer 1

Answer №1

If you want to ensure your columns add up to 100% of the container width, consider using percentage values for width along with a min-width in pixels as shown below:

//CSS
.col1{
  width:5%; 
  min-width:20px;   
}
.container{
  width: 1024px;
  margin: auto;
}
#MyTable{
  width: 100%;
}

Remember to apply the same principles to all other columns as well!

In the HTML code, make sure to wrap the table inside a container element like this:

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

Answer 2

If you want to ensure your columns add up to 100% of the container width, consider using percentage values for width along with a min-width in pixels as shown below:

//CSS
.col1{
  width:5%; 
  min-width:20px;   
}
.container{
  width: 1024px;
  margin: auto;
}
#MyTable{
  width: 100%;
}

Remember to apply the same principles to all other columns as well!

In the HTML code, make sure to wrap the table inside a container element like this:

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

CSS technique for adjustable column width in HTML tables

Answer №1

Similar questions

Using the power of AJAX, retrieve data from a PHP script and showcase the response within

Run JavaScript code whenever the table is modified

Obtain the height and width of the original images from the href and assign them to your attributes using jQuery

Tips on presenting messages to users after clicking the submit button?

Angucomplete-alt fails to display dropdown menu

Steps to gather all the images within a directory

Progress bar displaying during Ajax request

Make a diagonally slanted border for a cell

Navigating between windows in Selenium with Webdriver - Handling unnamed child windows

Obtain a masterpiece by creating a canvas in React

Insider's guide to showcasing code in vibrant colors using Python Django

Step-by-step guide on crafting your own twig with customizable color options using a colorpicker

Is there a way to extract and store an image from a webpage using selenium, beautifulsoup, and Python 3?

A guide on incorporating jQuery alert messages into Angular 2

I'm having trouble getting my window resize event listener to function properly. I'm using a combination of Three.js and Vuetify.js

Is it possible to eliminate jagged edges in CSS 2D rasterization by applying anti-aliasing to subpixels?

Populating table with information stored locally

Exploring Angular's Animation Feature for HTML Element Movement

Button click not triggering Ajax functionality

PHP Pear Mail HTML Edition