У меня есть таблица: -
<table >
<thead style="width: calc(100% - 15px); display: table; table-layout: fixed;">
<tr>
<th colspan="3"></th>
<th colspan="4">Total</th>
<th colspan="4">Total</th>
</tr>
<tr>
<th>Name</th>
<th>Type</th>
<th>Total</th>
<th>Size</th>
<th>Min</th>
<th>Max</th>
<th>Price</th>
<th>Size</th>
<th>Min</th>
<th>Max</th>
<th>Price</th>
</tr>
</thead>
<tbody style="display: block; max-height: 450px; overflow-y: scroll;">
<tr style="display: table; table-layout: fixed; width: 100%; height: 1px;">
<td>
<div>3726</div>
</td>
<td>
<div>20</div>
</td>
<td>
<div>20</div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="display: table; table-layout: fixed; width: 100%; height: 1px;">
<td>
<div>3726</div>
</td>
<td>
<div>20</div>
</td>
<td>
<div>20</div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="display: table; table-layout: fixed; width: 100%; height: 1px;">
<td>
<div>3726</div>
</td>
<td>
<div>20</div>
</td>
<td>
<div>20</div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Здесь два раздела (<th colspan="4">Total</th><th colspan="4">Total</th>)
являются динамическими, т. Е. Их может быть больше двух, и повторяется th для этих 4 столбцов.
Теперьто, что я хочу, это первый столбец «Имя» в разделе подзаголовка шире, не мешая другим.Но из-за colspan я не могу указать ширину и colspan = "2" не работает.Я не могу вносить какие-либо изменения в макет таблицы также.Есть ли способ, которым я могу добиться этого?