CSS Grid not applying styles to inner children - css

Question

I am creating a table as below and want to use display:grid. But for some reason, the styles within the grid items are not being applied. Any idea what I am doing wrong?
table {
border-collapse: collapse;
width: 100%;
table-layout: auto;
display: grid;
grid-template-columns: 1fr 1fr min-content;
}
thead,
tbody,
tr {
display: contents;
}
tbody {
overflow: auto;
}
thead {
font-weight: bold;
border-bottom: 1px solid #ccc;
}
th,
td {
padding: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
th {
position: sticky;
top: 0;
padding: 0 4px 0 8px;
text-align: left;
position: relative;
}
tr {
line-height: 1.5;
border: none;
border-collapse: none;
height: 40px;
min-height: 40px;
}
tr:nth-child(2n){
background-color: pink;
}
tr:hover {
background-color: red;
}
td {
min-height: 40px;
height: 40px;
padding: 8px;
text-align: left;
}
<table class="list" role="grid">
<thead>
<tr role="row">
<th role="columnheader">Date</th>
<th role="columnheader">Action</th>
<th role="columnheader">Comments</th>
</tr>
</thead>
<tbody>
<tr role="row">
<td role="gridcell">1584748800000</td>
<td role="gridcell">DISMISS</td>
<td role="gridcell">gt</td>
</tr>
<tr role="row">
<td role="gridcell">1584662400000</td>
<td role="gridcell">DISMISS</td>
<td role="gridcell">asdasdsadasdsa</td>
</tr>
<tr role="row">
<td role="gridcell">1584576000000</td>
<td role="gridcell">DISMISS</td>
<td role="gridcell">fdgfdgdf</td>
</tr>
<tr role="row">
<td role="gridcell">1584144000000</td>
<td role="gridcell">ACCEPT</td>
<td role="gridcell">asdasdsadsadsadsa</td>
</tr>
<tr role="row">
<td role="gridcell">1583539200000</td>
<td role="gridcell">ACCEPT</td>
<td role="gridcell">asdasdsadsa</td>
</tr>
<tr role="row">
<td role="gridcell">1583452800000</td>
<td role="gridcell">DISMISS</td>
<td role="gridcell">asdasdsadsa</td>
</tr>
<tr role="row">
<td role="gridcell">1583366400000</td>
<td role="gridcell">DISMISS</td>
<td role="gridcell">asdasdasdsadsadsadsa</td>
</tr>
<tr role="row">
<td role="gridcell">1583280000000</td>
<td role="gridcell">DISMISS</td>
<td role="gridcell">aadasdsadsa</td>
</tr>
<tr role="row">
<td role="gridcell">1583193600000</td>
<td role="gridcell">DISMISS</td>
<td role="gridcell">asdas</td>
</tr>
<tr role="row">
<td role="gridcell">1583107200000</td>
<td role="gridcell">DISMISS</td>
<td role="gridcell">asd</td>
</tr>
</tbody>
</table>

Answer 1

I just cleaned your code.
table {
border-collapse: collapse;
width: 100%;
}
th {
text-align: left;
padding: 8px;
background-color: gray;
border: 1px solid black;
}
td {
text-align: left;
padding: 8px;
border: 1px solid black;
}
tr:nth-child(even) {
background-color: pink;
}
td:hover {
background-color: red;
}
td {
min-height: 40px;
height: 40px;
padding: 8px;
text-align: left;
}
<table class="list" role="grid">
<thead>
<tr role="row">
<th role="columnheader">Date</th>
<th role="columnheader">Action</th>
<th role="columnheader">Comments</th>
</tr>
</thead>
<tbody>
<tr role="row">
<td role="gridcell">1584748800000</td>
<td role="gridcell">DISMISS</td>
<td role="gridcell">gt</td>
</tr>
<tr role="row">
<td role="gridcell">1584662400000</td>
<td role="gridcell">DISMISS</td>
<td role="gridcell">asdasdsadasdsa</td>
</tr>
<tr role="row">
<td role="gridcell">1584576000000</td>
<td role="gridcell">DISMISS</td>
<td role="gridcell">fdgfdgdf</td>
</tr>
<tr role="row">
<td role="gridcell">1584144000000</td>
<td role="gridcell">ACCEPT</td>
<td role="gridcell">asdasdsadsadsadsa</td>
</tr>
<tr role="row">
<td role="gridcell">1583539200000</td>
<td role="gridcell">ACCEPT</td>
<td role="gridcell">asdasdsadsa</td>
</tr>
<tr role="row">
<td role="gridcell">1583452800000</td>
<td role="gridcell">DISMISS</td>
<td role="gridcell">asdasdsadsa</td>
</tr>
<tr role="row">
<td role="gridcell">1583366400000</td>
<td role="gridcell">DISMISS</td>
<td role="gridcell">asdasdasdsadsadsadsa</td>
</tr>
<tr role="row">
<td role="gridcell">1583280000000</td>
<td role="gridcell">DISMISS</td>
<td role="gridcell">aadasdsadsa</td>
</tr>
<tr role="row">
<td role="gridcell">1583193600000</td>
<td role="gridcell">DISMISS</td>
<td role="gridcell">asdas</td>
</tr>
<tr role="row">
<td role="gridcell">1583107200000</td>
<td role="gridcell">DISMISS</td>
<td role="gridcell">asd</td>
</tr>
</tbody>
</table>