Using HTML and CSS to create a display-table for laying out a form

Question

Using HTML and CSS to create a display-table for laying out a form

Working on a dynamic HTML/CSS layout that simplifies the process by using classes like form, row, cell label, and cell input to control elements (width, alignment, etc.).

I decided to utilize display: table along with its child elements table-row and table-cell as they address most of the layout issues seamlessly without requiring workarounds. The objective is to achieve a design where placing 2 containers inside a cell automatically assigns them 50% width, or 33% for 3 containers, 25% for 4, and so forth:

https://i.sstatic.net/Nv4Lx.png

The challenge I'm facing is that tables nested within a table-cell extend beyond the borders:

https://i.sstatic.net/FGjjg.png

Any advice on how to resolve this issue?

UPDATE: Check out the JSFiddle demo here: https://jsfiddle.net/3gcnaetx/1/

html css forms

Answer 1

Answer №1

If you're facing layout issues, consider utilizing bootstrap as it offers a grid system that can effectively tackle such problems. Alternatively, if you prefer creating your own CSS solution, you may find inspiration in the snippet I've provided below. While I cannot guarantee that it will completely resolve your problem, I hope it at least points you in the right direction.

CSS & HTML Snippet:

*{
    box-sizing: border-box; 
}
.formrow:after, .col-2:after{
    display: table;
    content: " ";
    clear: both;
}
.col-2 {
    border: 1px dashed black;
    height: 100%;
    padding: 5px;
    width: 50%;
    min-width: 200px;
    float: left;
}
label {
    float: left;
    padding-right: 10px;
}

<div class="form">
    <form>
        <div class="formrow">
            <div class="col-2"><label for="input1">Label</label></div>
            <div class="col-2"><input id="input1"></input></div>
        </div>
        <div class="formrow">
            <div class="col-2"><label for="input2">Even longer label</label></div>
            <div class="col-2"><input id="input2"></input></div>
        </div>
        <div class="formrow">
            <div class="col-2">
                <label for="input3">Label</label>
                <input id="input3"></input>
            </div>
            <div class="col-2">
                <label for="input4">Label</label>
                <input id="input4"></input>
            </div>
        </div>
    </form>
</div>

Answer 2

If you're facing layout issues, consider utilizing bootstrap as it offers a grid system that can effectively tackle such problems. Alternatively, if you prefer creating your own CSS solution, you may find inspiration in the snippet I've provided below. While I cannot guarantee that it will completely resolve your problem, I hope it at least points you in the right direction.

CSS & HTML Snippet:

*{
    box-sizing: border-box; 
}
.formrow:after, .col-2:after{
    display: table;
    content: " ";
    clear: both;
}
.col-2 {
    border: 1px dashed black;
    height: 100%;
    padding: 5px;
    width: 50%;
    min-width: 200px;
    float: left;
}
label {
    float: left;
    padding-right: 10px;
}

<div class="form">
    <form>
        <div class="formrow">
            <div class="col-2"><label for="input1">Label</label></div>
            <div class="col-2"><input id="input1"></input></div>
        </div>
        <div class="formrow">
            <div class="col-2"><label for="input2">Even longer label</label></div>
            <div class="col-2"><input id="input2"></input></div>
        </div>
        <div class="formrow">
            <div class="col-2">
                <label for="input3">Label</label>
                <input id="input3"></input>
            </div>
            <div class="col-2">
                <label for="input4">Label</label>
                <input id="input4"></input>
            </div>
        </div>
    </form>
</div>

Using HTML and CSS to create a display-table for laying out a form

Answer №1

Similar questions

Having trouble setting the selected option in Jquery by value?

flex child moves outside parent when available space shifts

update the dropdown values in the database by submitting the form

Are there any ways to bring visual attention to a GoDaddy template's SEND button using HTML or JS when the original code is unavailable?

Issue with the Ajax auto-complete feature in Internet Explorer

PHP version 7.2.1 is throwing an error indicating an undefined index for the file_upload

implementing a JavaScript function and declaring a variable from an HTML source

Columns with adjustable widths

Do we really require a mime type to play videos in HTML5?

Unable to activate slideToggle due to malfunctioning links

Troubleshooting issue with changing class based on input values

Exporting MySQL data to MS Excel is functioning smoothly on the local environment, however, it is encountering difficulties when

Changing CSS module variables through JavaScript programming

How can I make the footer on my webpage have a white background?

Do I have to include the HTML audio type when writing code?

Prevent Scrolling of Body Content within a Specified Div

Step-by-step guide for adding an icon to the corner of a Material UI button

Issue with useEffect EventListener in REACT HOOKS

Is there a way to trigger two distinct CSS transitions simultaneously with a single click?

Specify the input type to occupy the full width and be contained within its parent div