A commonly used method to adjust the width of a table column to accommodate the size of the child element

Question

A commonly used method to adjust the width of a table column to accommodate the size of the child element

I have a specific table width of 776 pixels with three columns. The third column has a fixed width of 216 pixels, but the widths of the other two are unknown. I want the second column to adjust its width based on its content, and whatever space is left after accounting for the third column should be allocated to the first column.

I came across a solution where the width of the column that needs to shrink is set to 1 pixel. While this does work, it feels more like a workaround than a standard practice. Is there a more conventional way to achieve the same outcome?

Below is an example of my HTML code with inline CSS:

<table style="width:776px; height:48px;">
    <tr>
        <td style="height:48px;">
            <div style="background:#f0f0f0; border:solid 2px #808080; font-size:0; margin-left:8px; text-align:center;">
                <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Art</h3></a>
                <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Events</h3></a>
                <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Papers</h3></a>
                <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Research</h3></a>
            </div>
        </td>
        <td style="vertical-align:middle; width:1px; height:48px;">
            <h3 style="margin-left:8px;"><label for="search">Search:</label></h3>
        </td>
        <td style="vertical-align:middle; width:216px; height:48px;">
            <input id="search" style="margin-left:8px; width:208px;" type="text" value="" maxlength="32">
        </td>
    </tr>
</table>

html css

Answer 1

Answer №1

To easily achieve this layout, you can start by setting the width of the first cell to 100%. This will make it expand to fill the parent table's width as much as possible. Next, in the third cell, insert a content element with a width of 216px, such as a div.

Table cells will always try to adjust to fit their content. In this setup, the second cell will be squeezed in the middle according to its own content, while the third cell will adhere to the fixed 216px width, leaving the first cell to fill up the remaining space.

See Example on JsFiddle

<table>
    <tr>
        <td>1stContent</td> <!-- Fills available space -->
        <td>2ndContent</td> <!-- Squeezed in the middle -->
        <td>
            <!-- Adheres to 216px width -->
            <div class="dv3rd">
                216px
            </div>
        </td>
    </tr>
</table>

CSS:

table {
    width: 776px;
    background: silver;
}

td:nth-child(1) {
    width: 100%;
    background: red;
}

td:nth-child(2) {
    background: green;
}

td:nth-child(3) {
    background: blue;
}

.dv3rd {
    width: 216px;
}

Alternative Approach

Although tables can achieve this layout, it is recommended to avoid using them for page structure. A better approach would be to utilize CSS tables, where div elements can mimic the behavior of table and table-cell display properties.

Here's the same example implemented without tables:

See Tableless Example on JsFiddle

<div class="table">
    <div>
        1stContent
    </div>
    <div>
        2ndContent
    </div>
    <div>
        <div class="dv3rd">
            216px
        </div>
    </div>
</div>

CSS:

.table {
    width: 776px;
    background: silver;
    display: table;
}

.table > div:nth-child(1) {
    display: table-cell;
    width: 100%;
    background: red;
}

.table > div:nth-child(2) {
    display: table-cell;
    background: green;
}

.table > div:nth-child(3) {
    display: table-cell;
    background: blue;
}

.dv3rd {
    width: 216px;
}

Answer 2

To easily achieve this layout, you can start by setting the width of the first cell to 100%. This will make it expand to fill the parent table's width as much as possible. Next, in the third cell, insert a content element with a width of 216px, such as a div.

Table cells will always try to adjust to fit their content. In this setup, the second cell will be squeezed in the middle according to its own content, while the third cell will adhere to the fixed 216px width, leaving the first cell to fill up the remaining space.

See Example on JsFiddle

<table>
    <tr>
        <td>1stContent</td> <!-- Fills available space -->
        <td>2ndContent</td> <!-- Squeezed in the middle -->
        <td>
            <!-- Adheres to 216px width -->
            <div class="dv3rd">
                216px
            </div>
        </td>
    </tr>
</table>

CSS:

table {
    width: 776px;
    background: silver;
}

td:nth-child(1) {
    width: 100%;
    background: red;
}

td:nth-child(2) {
    background: green;
}

td:nth-child(3) {
    background: blue;
}

.dv3rd {
    width: 216px;
}

Alternative Approach

Although tables can achieve this layout, it is recommended to avoid using them for page structure. A better approach would be to utilize CSS tables, where div elements can mimic the behavior of table and table-cell display properties.

Here's the same example implemented without tables:

See Tableless Example on JsFiddle

<div class="table">
    <div>
        1stContent
    </div>
    <div>
        2ndContent
    </div>
    <div>
        <div class="dv3rd">
            216px
        </div>
    </div>
</div>

CSS:

.table {
    width: 776px;
    background: silver;
    display: table;
}

.table > div:nth-child(1) {
    display: table-cell;
    width: 100%;
    background: red;
}

.table > div:nth-child(2) {
    display: table-cell;
    background: green;
}

.table > div:nth-child(3) {
    display: table-cell;
    background: blue;
}

.dv3rd {
    width: 216px;
}

Answer 3

Answer №2

I discovered the reason why this technique works by following a link shared by BoltClocks in the comments section: http://www.w3.org/TR/CSS21/tables.html#auto-table-layout

Upon further investigation, it is noted that this algorithm could potentially be inefficient as it necessitates the user agent to have full access to all table content to determine the final layout, possibly requiring more than one pass.

The determination of column widths adheres to the following methodology:

Begin by calculating the minimum content width (MCW) of each cell: the content format might span multiple lines but should never exceed the cell box boundaries. If the specified 'width' (W) of the cell surpasses MCW, then W serves as the minimum cell width. In cases where 'auto' is designated, MCW automatically becomes the minimum cell width...

Solution:
Compute the minimum content width (MCW) for each cell accordingly – ensuring the formatted content remains within the confines of the cell box.

Answer 4

I discovered the reason why this technique works by following a link shared by BoltClocks in the comments section: http://www.w3.org/TR/CSS21/tables.html#auto-table-layout

Upon further investigation, it is noted that this algorithm could potentially be inefficient as it necessitates the user agent to have full access to all table content to determine the final layout, possibly requiring more than one pass.

The determination of column widths adheres to the following methodology:

Begin by calculating the minimum content width (MCW) of each cell: the content format might span multiple lines but should never exceed the cell box boundaries. If the specified 'width' (W) of the cell surpasses MCW, then W serves as the minimum cell width. In cases where 'auto' is designated, MCW automatically becomes the minimum cell width...

Solution:
Compute the minimum content width (MCW) for each cell accordingly – ensuring the formatted content remains within the confines of the cell box.

A commonly used method to adjust the width of a table column to accommodate the size of the child element

Answer №1

Answer №2

Similar questions

Challenges with incrementing in Jquery's each loop and setTimeout

Disappearing sticky-top navbar in Bootstrap when scrolling

When resizing the browser, HTML/CSS elements tend to shift positions :(

Modify the h:outputText value dynamically with the power of jQuery!

Capable of retrieving response data, however, the label remains invisible in the dropdown menu

Maintaining Proper Header Dimensions

Button Menu in HTML

The fixed navigation bar shows a flickering effect while scrolling at a slow pace

Looking to have the image float after reducing the size of the windows in html?

Displaying the HTML code for a dynamically generated table

Setting variables in AngularJS services without encountering JavaScript undefined errors

Unknown identifier in the onClick function

Choosing elements in HTML using jQuery from an Ajax GET response

Vibrant shades of color overflow the Mui Radio

The CSS and JS codes are not successfully integrating into the webpage

What is the best way to change the maxWidthLg of Material UI's .MuiContainer?

Navigate directly to a specific section on a webpage

What could be causing the append function to only work during the final iteration of my code?

HTML forms default values preset

Evaluating h1 content in HTML using Angular Protactor testing