float: 就在 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

您可以使用默认的 table 布局模式并展开第二个 table 单元格。

因为 table 布局模式设置为 auto，即使我们将一个单元格扩展到 table 的宽度，布局也会将该单元格扩展到尽可能多的宽度space 尽可能。

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>

float: 就在 td 的内联 css 中

float: right in inline css of td

html

css

html-table

right-align