Как разделить ячейку внутри таблицы по соотношению

Question

I w sh, чтобы разделить ячейку внутри таблицы HTML по соотношению.

Например, I w sh, чтобы увидеть зеленый div, который займет 60% ячейки, и рядом с ним - красный div, который займет оставшиеся 40%.

Примечание: div должен быть пустым из любого текста

Почему мой код не работает?

.passDiv {
  background-color: red;
  display: inline-block;
}

.failDiv {
  background-color: rgba(211, 0, 0, 1);
  display: inline-block;
}

<table>
  <tr>
    <th>Name</th>
    <th>Status</th>
    <th>Execution Time</th>
    <th>Steps Passed / Failed</th>
  </tr>
  <tr>
    <td>Test AAA</td>
    <td>Passed</td>
    <td>00:02:30</td>
    <td>
      <div class="passDiv" width="60%"></div>
      <div class="failDiv" width="40%"></div>
    </td>
  </tr>
</table>

Answer 1

td {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.passDiv {
  background-color: green;
  text-align: center;
}

.failDiv {
  background-color: rgba(211, 0, 0, 1);
  text-align: center;
}

<table>
	<tr>
		<th>Name</th>
		<th>Status</th>
		<th>Execution Time</th>
		<th width='40%'>Passed </th>
		<th width='60%'>Failed</th>
	</tr>
	<tr>
		<td>Test AAA</td>
		<td>Passed</td>
		<td>00:02:30</td>
		<td width='40%' class="passDiv"></td>
		<td width='60%' class="failDiv"></td>
	</tr>
</table>

Answer 2

.passDiv {
  background-color: green;
  display: block;
  width:60%;
  float:left;
}

.failDiv {
  background-color: rgba(211, 0, 0, 1);
  display: block;
   width:40%;
  float:left;
}

<table>
  <tr>
    <th>Name</th>
    <th>Status</th>
    <th>Execution Time</th>
    <th>Steps Passed / Failed</th>
  </tr>
  <tr>
    <td>Test AAA</td>
    <td>Passed</td>
    <td>00:02:30</td>
    <td>
    <div class="passDiv">Pass</div> 
    <div class="failDiv">Fail</div>
    </td>
  </tr>
  </table>