CSS Сетка без применения стилей к внутренним детям

Question

Я создаю таблицу, как показано ниже, и хочу использовать display:grid. Но по какой-то причине стили внутри элементов сетки не применяются. Есть идеи, что я делаю не так?

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

Я только что убрал твой код.

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>