What is the best way to extend the final column of a table across the entire width?

Question

What is the best way to extend the final column of a table across the entire width?

Here's the code I'm working with:

.frm-find-people table td:nth-child(1) {
    padding: 5px 15px;
    width: 100px
}

.frm-find-people table td:nth-child(2) {
    border: 1px solid red;
}

<form class="frm-find-people">
    <table>
        <tbody>
            <tr>
                <td>Name</td>
                <td><input type="text" name="name"></td>
            </tr>
        </tbody>
    </table>
</form>

I need help making the red box (the second td of the table) expand to fill the remaining width. Can anyone suggest a solution?

html css

Answer 1

Answer №1

Tables have strict layout rules that require no cell to be narrower than its content width. To overcome this, you can simply set the cell's width to 100%, allowing it to fill up the space left by the adjacent Name cell:

.label {
    width: 100px;
    padding: 5px 15px;
}

.input {
    border: 1px solid red;
    width: 100%;
}

.input > input {
  width: calc(100% - 4px);
}

<form class="frm-find-people">
    <table>
        <tbody>
            <tr>
                <td class="label">Name</td>
                <td class="input"><input type="text" name="name"></td>
            </tr>
        </tbody>
    </table>
</form>

Answer 2

Tables have strict layout rules that require no cell to be narrower than its content width. To overcome this, you can simply set the cell's width to 100%, allowing it to fill up the space left by the adjacent Name cell:

.label {
    width: 100px;
    padding: 5px 15px;
}

.input {
    border: 1px solid red;
    width: 100%;
}

.input > input {
  width: calc(100% - 4px);
}

<form class="frm-find-people">
    <table>
        <tbody>
            <tr>
                <td class="label">Name</td>
                <td class="input"><input type="text" name="name"></td>
            </tr>
        </tbody>
    </table>
</form>

What is the best way to extend the final column of a table across the entire width?

Answer №1

Similar questions

Creating a blur effect on an image tag when hovering using CSS and HTML

How can the color of unselected mat-steps be customized in Angular?

The hidden DIV containing an ASP.NET CheckBox consistently yields a value of false

A <div> with 100% height nested within a full-page div positioned at top:0 and bottom:0

What is the best way to display the most recent data from a sqlite database and incorporate animations for a more engaging

What is the best way to implement dragging functionality for an image within a specific area?

Creating an email in Gmail with a pre-filled HTML body

How to prevent CSS styles from being overridden by SASS in a stylesheet

Attempting to make Navbar vanish as the page size decreases

Modify the pseudo element when a different class is active

What is the best way to align an element next to another using id or class?

Element with absolute position does not expand along with scrollable content (over 100%)

the best way to transfer a JavaScript value to a PHP page

Creating a Striking Multi-Layered CSS Header

What criteria do web browsers use to determine the order in which to apply @media queries when there are multiple relevant queries for the device

Troubleshooting alignment problems with a responsive gallery (Bootstrap-gallery & justifyGallery)

What could be causing the overflow of content from my div element?

Incorporating a CSS Stylesheet into an ASP.NET Custom Control

Removing the gridlines in a Linechart using Apexcharts

Display Button and Div when Event occurs in Asp.net core using Razor Pages