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!
CodePudding user response:
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 >
<div><span>One</span><span>X</span></div>
</th>
<th >
<div><span>Two</span><span>X</span></div>
</th>
<th >
<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>