css table th and td not taking 100% of the width

Question

I would like to make th and td both 100% width by only manupulating css. It seems like th stretches out far but never fully to push out the td. What's wrong with this code?

.custom-table {
  display: grid;
  width: 100%;
  table-layout:fixed;
}

.custom-table th,
.custom-table td {
  width: 100%;
  border: 1px solid black; /* Just for visualization */
  text-align: center; /* Center the content */
  padding: 5px;
}

<table class="custom-table">
<tbody>
  <tr>
    <th>name</th>
    <td>Alex</td>
  </tr>
  </tbody>
  
  <tbody>
  <tr>
    <th>Age</th>
    <td>30</td>
  </tr>
  </tbody>
</table>

Answer 1

if you want both "th" and "td" elements take up 100% just give display: flex; and flex-direction: column; on "tr" then it will take 100% width.