Different width of column in the HTML table

I am trying to make the width of tds different in the HTML tale but I am unable to do so.

HTML Code

<table class="TFtable" border="1">
        <tr>
            <th >Heading1</th>
            <th >Heading2</th>
            <th >Heading3</th>
        </tr>
        <tr>
            <td>Text jshdf hjkhsdk jhfkhds fkjhf sdjkh dsfkjh</td>
            <td >Text</td>
            <td >Text</td>
        </tr>
        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>Text</td>
             <td>Text</td>
            <td>Text</td>
        </tr>
    </table>

CSS

.TFtable {
    width: 50%;
    border-collapse: collapse;
    table-layout: fixed;
}

.TFtable tr {
    padding: 7px;
    border: #4e95f4 1px solid;
}

/* provide some minimal visual accomodation for IE8 and below */
.TFtable tr {
    background: #FFFFFF;
}

/*  Define the background color for all the ODD background rows  */
.TFtable tr:nth-child(odd) {
    background: #FFFFFF;
}

/*  Define the background color for all the EVEN background rows  */
.TFtable tr:nth-child(even) {
    background: #BCCECE;
}

.TFtable td{
table-layout: fixed;
width: 20px;
height:auto;
overflow: auto;
}

Link to JSFiddle.

Here