table header 没有换行浮动

Question

无法在 table header 单元格内向右浮动元素。我认为它是 bootstrap 但包装仍然发生在普通 html.
只需要 table header 我可以在右边放一个图标。尝试了 white-space:nowrap 以及 display:table.

https://jsfiddle.net/8vh3wmfj/2/

<th>
  One 
  <span style="float:right;white-space:nowrap">X</span>
</th>
<th>
  TWO
  <span style="float:right">X</span>
</th>

如有指点，将不胜感激！

Answer 1

只要您需要在另一个元素内的两个元素之间适当 space，就可以使用 display:flex; 和 justify-content:space-between;。就像这里我在 div space-between 属性中使用两个 span 在这两个之间平均分配 space 。我希望你明白这一点。

table,
th,
td {
  border: 1px solid #000;
}

.table-column-header div {
  display: flex;
  justify-content: space-between;
}

<table>
  <thead>
    <tr>
      <th class="table-column-header">
        <div><span>One</span><span>X</span></div>
      </th>
      <th class="table-column-header">
        <div><span>Two</span><span>X</span></div>
      </th>
      <th class="table-column-header">
        <div><span>Three</span><span>X</span></div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data....</td>
      <td>Table Data....</td>
      <td>Table Data....</td>
    </tr>
  </tbody>
</table>

table header 没有换行浮动

table header no wrap float right in th

html

bootstrap-5