Fixed Last Column Of The Table

Can someone help me about css? I want my last column of the table is fixed. The first and second columns that are auto layout but third to be fixed on the right side of the div ele

Solution 1:

This way

table{width:100%;}
table td{border:1px solid #ccc;}

<div>   
 <table cellpadding="0" cellspacing="0">
        <tr>
            <td>text</td>
            <td>text</td>
            <td width="100">text</td>
        </tr>
     <tr>
            <td>text</td>
            <td>text</td>
            <td>text</td>
        </tr>

</table>
<div>

Solution 2:

As i mentioned in my comment, in case you need fix width for last column you can try following

<div>   
 <table style="width:100%;">
        <tr>
            <td>text</td>
            <td>text</td>
            <td width="250px">text</td> <!-- or width="30%" -->
        </tr>
     <tr>
            <td>text</td>
            <td>text</td>
            <td>text</td>
        </tr>

</table>
<div>

in case you just need the content of the last column to be aligned right try following.

<div>   
 <table style="width:100%;">
        <tr>
            <td>text</td>
            <td>text</td>
            <td style="text-align:right;">text</td>
        </tr>
     <tr>
            <td>text</td>
            <td>text</td>
            <td style="text-align:right;">text</td>
        </tr>

</table>
<div>

Solution 3:

I think you're looking for this. you can set all the last column right side of the div. LiveFiddle . If any question ask me in comment.

table{
  width:100%;
}
td:last-of-type {
 float:right;
}

<div>   
 <table>
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
 <tr >
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>

</table>
<div>