'table header no wrap float right in th

Having trouble floating an element to the right inside a table header cell. I thought it was bootstrap but wrapping still happens with plain html.
Just need a table header where I can put an icon to the right. Tried white-space:nowrap as well as 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>

Any pointers would be appreciated!

htmlbootstrap-5


Solution 1:[1]

You can use display:flex; and justify-content:space-between; whenever you need proper space between two elements inside another element. Like here I am using two span inside a div space-between property equally distribute space between these two. I hope you understand this point.

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions