CODEWITHSUNDEEP
htmlcss
rachel
rachel

Reputation: 157

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

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.

<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.

Upvotes: 1

Views: 86

Answers (1)

elveti
elveti

Reputation: 2386

You can try

.table-row > form {
  display: contents;
}

which only shows an elements contents, instead of the element itself. https://jsfiddle.net/n0xpywj7/

Upvotes: 3

Related Questions