Flexible column widths in table with scrollable body - css

Question

I currently have following implementatin where I want the body of the table to be scrollable. However, the column widths are all of equal width and I am trying to figure out how to achieve a flexible tablecell width based on content, while keeping the body's scrolling. ideas?
.modal {
height: 300px;
}
.first {
height: 100%;
}
table.list {
border-collapse: collapse;
width: 100%;
height: 100%;
}
thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
thead {
font-weight: bold;
border-bottom: 1px solid #ccc;
height: 40px;
}
th {
padding: 0 $now-global-space--sm 0 $now-global-space--md;
text-align: left;
word-break: break-word;
hyphens: auto;
}
tbody {
overflow: auto;
display: block;
height: calc(100% - 40px);
}
tr {
line-height: 1.5;
border: none;
border-collapse: none;
min-height: 40px;
}
td {
min-height: 40px;
min-width: 40px;
padding: 4px;
text-align: left;
word-break: break-word;
hyphens: auto;
}
tr:nth-child(2n) td {
background-color: red;
}
tr:hover td {
background-color: pink;
}
<div class="modal">
<div class="first">
<table class="list" role="grid">
<thead>
<tr role="row">
<th role="columnheader">Date</th>
<th role="columnheader">Action</th>
<th role="columnheader">Comment</th>
</tr>
</thead>
<tbody>
<tr role="row">
<td role="gridcell">Mar 24</td>
<td role="gridcell">somoene</td>
<td role="gridcell">ddddd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 23</td>
<td role="gridcell">someone</td>
<td role="gridcell">ddddd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 22</td>
<td role="gridcell">someone</td>
<td role="gridcell">dd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 21</td>
<td role="gridcell">someone</td>
<td role="gridcell">asd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 20</td>
<td role="gridcell">someone</td>
<td role="gridcell">asdasdsadasdsa</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 14</td>
<td role="gridcell">someone</td>
<td role="gridcell">asdasdsadsadsadsa</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 7</td>
<td role="gridcell">lala</td>
<td role="gridcell">asdasdsadsa</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 1

javascript, dispay:grid/contents could be options, but a wrapper and position:sticky could be a compromise to avoid breaking the table-layout , here is below a demo of the idea
.modal {
height: 300px;
border:solid;
}
.first {
height: 100%;
position: relative;
overflow: auto;
}
table.list {
border-collapse: collapse;
width: 100%;
height: 100%;
}
thead {
font-weight: bold;
border-bottom: 1px solid #ccc;
height: 40px;
}
thead tr {
position: sticky;
top: 0;
background: white;
box-shadow: 0 0 5px;
}
th {
text-align: left;
word-break: break-word;
hyphens: auto;
}
tr {
line-height: 1.5;
}
td {
height: 40px;
width: 40px;
padding: 4px;
text-align: left;
word-break: break-word;
hyphens: auto;
}
tr:nth-child(2n) td {
background-color: red;
}
tr:hover td {
background-color: pink;
}
<div class="modal">
<div class="first">
<table class="list" role="grid">
<thead>
<tr role="row">
<th role="columnheader">Date</th>
<th role="columnheader">Action</th>
<th role="columnheader">Comment</th>
</tr>
</thead>
<tbody>
<tr role="row">
<td role="gridcell">Mar 24</td>
<td role="gridcell">somoene</td>
<td role="gridcell">ddddd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 23</td>
<td role="gridcell">someone</td>
<td role="gridcell">ddddd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 22</td>
<td role="gridcell">someone</td>
<td role="gridcell">dd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 21</td>
<td role="gridcell">someone</td>
<td role="gridcell">asd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 20</td>
<td role="gridcell">someone</td>
<td role="gridcell">asdasdsadasdsa</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 14</td>
<td role="gridcell">someone</td>
<td role="gridcell">asdasdsadsadsadsa</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 24</td>
<td role="gridcell">somoene</td>
<td role="gridcell">ddddd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 23</td>
<td role="gridcell">someone</td>
<td role="gridcell">ddddd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 22</td>
<td role="gridcell">someone</td>
<td role="gridcell">dd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 21</td>
<td role="gridcell">someone</td>
<td role="gridcell">asd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 20</td>
<td role="gridcell">someone</td>
<td role="gridcell">asdasdsadasdsa</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 14</td>
<td role="gridcell">someone</td>
<td role="gridcell">asdasdsadsadsadsa</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 7</td>
<td role="gridcell">lala</td>
<td role="gridcell">asdasdsadsa</td>
</tr>
</tbody>
</table>
</div>
</div>