float: прямо в строке css of td

Question

Мой результат и ожидание на изображении ниже:

, что я пытался:

<table>
  <tr>
    <td>Name:-</td>
    <td><strong>XYZ</strong></td>
    <span style="float: right;">
     <td>Age:-</td>
     <td><strong>38</strong></td>
   </span>
  </tr>
</table>

Мой результат и ожидания на изображении ниже:

Answer 1

Вы можете сделать это, используя режим макета таблицы по умолчанию и развернув вторую ячейку таблицы.

Поскольку режим макета таблицы установлен на auto, даже если мы расширим одинот ячейки до ширины таблицы макет будет расширять эту ячейку, чтобы занять как можно больше места.

table {
  width: 100%; /* <-- only this is necassery for this effect */
  padding: 0.5em;
  background: lightgrey;
}

.expand {
  width: 100%;
}

<table>
  <tr>
    <td>Name:-</td>
    <td class="expand"><strong>XYZ</strong></td>
    <td>Age:-</td>
    <td><strong>38</strong></td>
  </tr>
</table>

Того же эффекта можно достичь, добавив пустую ячейку и расширив ее:

<table>
  <tr>
    <td>Name:-</td>
    <td><strong>XYZ</strong></td>
    <td class="expand"></td>
    <td>Age:-</td>
    <td><strong>38</strong></td>
  </tr>
</table>