I am looking to keep the structure of my HTML code consistent and unaltered. However, this has resulted in a form tag being nested inside a table row before the table cells can begin. The information I need to display is tabulated data, which makes CSS tables the appropriate choice for styling. I am seeking a CSS-only solution that links the data in the table rows to the header while maintaining responsiveness. The layout breaks when the form tag is included, even though it works perfectly without it. CSS grid and flexbox are not suitable solutions due to the specific structure of the HTML code.
<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 link: https://jsfiddle.net/rachymm/mwjvde4r/23/
Although I can achieve this using JavaScript, I am exploring CSS-only options first.