I want to make one width of column in table to be less, than content with. Here's my code:
html:
<table class="table">
<thead>
<tr>
<th class="col1">col1</th>
<th class="col2">col2</th>
<th class="col3">col3</th>
<th class="col4">col4</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">aaaaaa</td>
<td class="col2">aaaaaa</td>
<td class="col3">aaaaaa</td>
<td class="col4">aaaaaa</td>
</tr>
</tbody>
</table>
scss:
.table {
margin: 0;
padding: 0;
border-collapse: collapse;
table-layout: fixed;
}
td, th {
border: 1px solid black;
padding: 5px 8px;
}
td:first-child, th:first-child {
width: 10px;
overflow: hidden;
white-space: nowrap;
}
As I understand setting table-layout: fixed
should helped, but nothing is really changed. The first column's with still is not 10px.
How can I set width to a column then?
td
?