Looking for a solution to create a responsive table layout where the thead stretches up to a specified div, while the tbody expands to fill the entire screen width. Is this achievable without using fixed values?
https://i.stack.imgur.com/v2ZYx.png
It is crucial that the table remains flexible and adapts to different screen sizes.
HTML:
<table>
<thead>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</thead>
<tbody>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</tbody>
</table>
<div class="box">
box
</div>
CSS:
table, th, td {
border: 1px solid black;
}
.box {
width: 50px;
height: 20px;
background:blue;
color: white;
float:left;
}
table {
float: left;
}