Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align icon to the right in a table cell?

Tags:

html

css

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>
like image 294
Black Avatar asked Feb 05 '16 08:02

Black


4 Answers

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.

like image 87
Rahul Tripathi Avatar answered Oct 14 '22 14:10

Rahul Tripathi


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>
like image 36
Atilla Arda Açıkgöz Avatar answered Oct 14 '22 13:10

Atilla Arda Açıkgöz


    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...

like image 24
mithu Avatar answered Oct 14 '22 13:10

mithu


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>
like image 32
ketan Avatar answered Oct 14 '22 14:10

ketan