Is there a way to get css table row to pair with table header when table row is

I need to use the following structure for the html. It needs to follow this same format and it can therefore not be changed.

Because of this, I'm left with a form tag being nested inside the table row before the table cells are able to start.

The data is tabular data, so it makes sense to use css table for it.

I would like a css only solution to have the data be linked to the data in the header and remain responsive. Without the form tag, this works perfectly, but the form tag breaks the layout.

css grid and flexbox don't provide solutions due to the structure of the html.

Update Madalin Stunt Cars 2 full version.

<div class="container table">
    <div class="table-header table-row">
        <div class="table-cell">item1</div>
        <div class="table-cell">item2</div>
        <div class="table-cell">item3</div>
        <div class="table-cell">item4</div>
        <div class="table-cell">submit</div>
    </div>
    <div class="table-row">
       <form>
            <div class="table-cell"><input type="text"></div>
            <div class="table-cell"><input type="text"></div>
            <div class="table-cell"><input type="text"></div>
            <div class="table-cell"><input type="text"></div>
            <div class="table-cell"><button>Update</button></div>
        </form>
    </div>
</div>

.container {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

Fiddle here: https://jsfiddle.net/rachymm/mwjvde4r/23/

I can do this with javascript, but trying to find a css only solution first.

Started by confessauditory at May 13, 2019 - 12:03 AM