javascript - HTML 表格中列的不同宽度

Question

我试图在 HTML 故事中使 tds 的宽度不同，但我做不到。

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。

Here

Answer 1

您可以使用此 HTML 代码在不使用 CSS 的情况下制作不同的 td 宽度

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