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

Terminate the ongoing PHP script execution

An element that stands alone, not contained within another element

Spacing between products in Woocommerce product list

"Going beyond the ordinary: An exclusive look at the Outlook newsletter design

Run an ajax function when a variable is populated with data

Tips for concealing a dynamic table element in Angular 9

Animate text and div elements with bounce or fade-in effects when they appear on the screen in a React application

Nested pages are causing jQuery plugins to malfunction

Using the novalidate attribute in Angular 4.0.0

Navigating through different templates in {output} with Ember

Ways to eliminate the top space in the background image

JavaScript: Controlling the ability to enter text based on the chosen option from a drop-down menu

Ensuring a @keyframe animation remains constant for the entire duration of the user's visit to the webpage using CSS

What is the best way to position a button on the right side of the page, ensuring that all text

"Creating a new element caused the inline-block display to malfunction

Ensure that the Javascript file is included before the CSS file to prevent any margin

Tips for including a line within a circular canvas

The JavaScript-generated form element will not be included in the data submitted through the POST method

JQuery Mobile fails to apply consistent styling to user input check items within a list

Can a div section be defined and then filled with data in the same document?