My table contains another table within each row. I have implemented scroll overflow for the mobile view, but this causes the rows to not fill the available space and lose their background when scrolling.
I have experimented with using width: fit-content and min-width: 100%, but I have not achieved the desired result of having the rows fill the entire available space with equal width.
I am looking to ensure that each row has the full width of its parent container.
.container {
max-width: 700px;
margin: 0 auto;
background: #FFF;
padding: 1rem;
border-radius: 1rem;
}
.table1 {
overflow-x: auto;
border: 1px solid #e0e0e0;
padding: 0.5rem;
border-radius: .25rem;
}
.table1__head {
display: flex;
gap: 32px;
align-items: center;
padding: .5rem;
}
.table1__head>div {
flex: 1 0 120px;
min-width: 120px;
}
.table1__body__row {
border: 1px solid red;
padding: .5rem;
border-radius: .25rem;
}
.table1__body__row:not(.table1__body__row:last-child) {
margin-bottom: 1rem;
}
.table1__body__row__cols {
display: flex;
gap: 32px;
}
.table1__body__row__cols>div {
flex: 1 0 120px;
min-width: 120px;
}
.table2 {
margin-top: .5rem;
border: 1px solid #e0e0e0;
padding: 0.5rem;
border-radius: .25rem;
}
.table2__head {
display: flex;
gap: 32px;
align-items: center;
padding: .25rem .5rem;
}
.table2__head>div {
flex: 1 0 120px;
min-width: 120px;
}
.table2__body__row {
display: flex;
gap: 32px;
border: 1px solid blue;
padding: .5rem;
border-radius: .25rem;
}
.table2__body__row>div {
flex: 1 0 120px;
min-width: 120px;
}<div class="container">
<div class="table1">
<div class="table1__head">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
<div>item 5</div>
<div>item 6</div>
</div>
<div class="table1__body">
<div class="table1__body__row">
<div class="table1__body__row__cols">
<div>table value item 1</div>
<div>table value item 2</div>
<div>table value item 3</div>
<div>table value item 4</div>
<div>table value item 5</div>
<div>table value item 6</div>
</div>
</div>
<div class="table1__body__row">
<div class="table1__body__row__cols">
<div>table value item 1</div>
<div>table value item 2</div>
<div>table value item 3</div>
<div>table value item 4</div>
<div>table value item 5</div>
<div>table value item 6</div>
</div>
<div class="table2">
<div class="table2__head">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
<div>item 5</div>
<div>item 6</div>
<div>item 7</div>
</div>
<div class="table2__body">
<div class="table2__body__row">
<div>table value item 1</div>
<div>table value item 2</div>
<div>table value item 3</div>
<div>table value item 4</div>
<div>table value item 5</div>
<div>table value item 6</div>
<div>table value item 7</div>
</div>
</div>
</div>
</div>
<div class="table1__body__row">
<div class="table1__body__row__cols">
<div>table value item 1</div>
<div>table value item 2</div>
<div>table value item 3</div>
<div>table value item 4</div>
<div>table value item 5</div>
<div>table value item 6</div>
</div>
</div>
</div>
</div>
</div>