HTML表中不同的列寬

Question

我正在嘗試使tds的寬度在HTML故事中有所不同，但我無法這樣做。

HTML代碼

<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;
}

鏈接到JSFiddle。

這里

Answer 1

您可以使用此HTML代碼來制作不同的td`s寬度，而無需使用CSS

<table border="1" width="100%;"> 
          <tr>
            <th >Heading1</th>
            <th >Heading2</th>
            <th >Heading3</th>
        </tr>
        <tr>
            <td width="20%">Text jshdf hjkhsdk jhfkhds fkjhf sdjkh dsfkjh</td>
            <td width="30%">Text</td>
            <td width="50%">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>