I have a simple table cell which contains a text and an icon. I want to align the text on the left and the icon on the right. I tried it like this, but it does not work. The only solution i know would be to create another td
where i put the icon inside. But i want both, text and icon in one td
table {
border: 1px solid red;
}
td {
border: 1px solid black;
width: 200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<table>
<tr>
<td>Text <span align="right"><i class="fa fa-toggle-on"></i></span></td>
<td>Test</td>
</tr>
</table>
Try to use
style="float:right;"
like this:
table {
border: 1px solid red;
}
td {
border: 1px solid black;
width: 200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<table>
<tr>
<td>Text <span style="float:right;"><i class="fa fa-toggle-on"></i></span></td>
<td>Test</td>
</tr>
</table>
Also as webeno has correctly pointed out in comments, the align attribute has been deprecated now. So try to avoid it.
If you want them in same td(not adding another for icon) you can try this:
<td>
<div style="float:left;width:50%;">I stay at left</div>
<div style="float:right;width:50%;">And I stay at right</div>
</td>
table {
border: 1px solid red;
}
td {
border: 1px solid black;
width: 200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<table>
<tr>
<td>Text <span ><i class="fa fa-toggle-on pull-right"></i></span></td>
<td>Test</td>
</tr>
</table>
this is the best way i think...
Just add will make your icon to right side.
span {
float: right;
}
Your updated example:
table {
border: 1px solid red;
}
td {
border: 1px solid black;
width: 200px;
}
td > span {
float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<table>
<tr>
<td>Text <span><i class="fa fa-toggle-on"></i></span></td>
<td>Test</td>
</tr>
</table>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With