Question

特殊的要求，我无法找到适当的解决方案：

对于附加了<div>的表格单元格中的内容，如何在阻止整个单元格包裹的同时右对齐<div>？

以下是我需要考虑的事项：https://jsfiddle.net/c01y63k1/

table td:first-child {
  white-space: nowrap;
}

table td:first-child > div {
  margin-left: 1em;
  display: inline-block;
}

<h2>This works:</h2>
<table style="width: 200px">
  <tr>
    <td>
      Test test
      <div>
        float!
      </div>
    </td>
    <td>Div with a lot of content</td>
  </tr>
</table>

<h2>But...</h2>
<p>
Now my 'float!' is not right-aligned when there's extra space in the cell:
</p>

<table style="width: 500px">
  <tr>
    <td>
      Test test
      <div>
        float!
      </div>
    </td>
    <td>Div with a lot of content</td>
  </tr>
</table>

正如您所看到的，当表格单元格的自动宽度小于内容的展开宽度时，上述内容将起作用。但是，当表格单元格的宽度大于内容的宽度时，div将不会右对齐（因为它不是）。

在float: right上应用div将以与上述情况相反的方式运作。在此处查看：https://jsfiddle.net/ycutor3t/

table td:first-child {
  white-space: nowrap;
}

table td:first-child > div {
  margin-left: 1em;
  display: inline-block;
  float: right
}

<h2>This does not work:</h2>
<table style="width: 200px">
  <tr>
    <td>
      Test test
      <div>
        float!
      </div>
    </td>
    <td>Div with a lot of content</td>
  </tr>
</table>

<h2>But... this does!</h2>
<p>
Now my 'float!' is right-aligned when there's extra space in the cell:
</p>

<table style="width: 500px">
  <tr>
    <td>
      Test test
      <div>
        float!
      </div>
    </td>
    <td>Div with a lot of content</td>
  </tr>
</table>

Answer 1

您可以使用flexbox

td:first-child {
  display: flex;
}
td:first-child > div {
  margin-left: auto; /* Push it to the right */
}

<table style="width: 500px">
  <tr>
    <td>
      Test test
      <div>float!</div>
    </td>
    <td>Div with a lot of content</td>
  </tr>
</table>

如何正确对齐表格单元格中的div而不包装？

1 个答案: