浮动：在TD的内联CSS中

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>