浮动:就在 td 的内联 css 中 [英] float: right in inline css of td

问题描述

我在下图中的结果和期望:

My result and expectation in the image below:

为此我尝试过:

<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>

我在下图中的结果和期望:

My result and expectation in the image below:

推荐答案

您可以通过使用默认表格布局模式并展开第二个表格单元格来实现.

You can do that by using the default table layout mode and expanding the second table cell.

因为表格布局模式设置为auto，即使我们将一个单元格扩展到表格的宽度，布局也会扩展该单元格以占用尽可能多的空间.

Because the table layout mode is set to auto, even if we expand one cell to the width of the table, the layout will expand that cell to take as much space as possible.

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>

添加一个空单元格并展开也可以达到同样的效果:

The same effect can be achieved by adding an empty cell and expanding it:

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

这篇关于浮动:就在 td 的内联 css 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！