html - float : right in inline 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>