html - 如何将列固定在 html 表中并且仅相对于一列？

Question

我有一个 7 列的 html 表。为什么宽度是相对的而不是固定的。如果我给类属性： style="table-layout: fixed; width: 100%;" ...然后所有列具有相同的宽度...

我该怎么做才能使列获得正确的宽度？

• labelD => 宽度：80px；
• 标签N => 宽度：50px；
• 和 labelT => 宽度：100%；桌子的其余部分...

.label {
    padding-top: 5px;
    text-align: right;
    vertical-align: top;
}

.labelD {
    width: 80px;
}

.labelN {
    width: 50px;
}

.labelT {
    width: calc(100% - 330px);
}

.list {
    border: hidden 1px #e8eef4;
    border-collapse: collapse;
    width: 100%; 
}

<div>
    <table class="list">
        <tr>
            <th class="label labelD">Date</th>
            <th class="label labelN">Note1</th>
            <th class="label labelN">Note2</th>
            <th class="label labelT">Title</th>
            <th class="label labelN">Note3</th>
            <th class="label labelN">Note4</th>
            <th class="label labelN">Note5</th>
        </tr>

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

标签： htmlcsshtml-table

Answer 1

Try:

.labelT { width: calc(100% - 330px); }

Every column will need a width though.