CODEWITHSUNDEEP
htmlcsshtml-table
user1531040
user1531040

Reputation: 2291

How get columns fixed in a html-table and JUST one column relative?

I have a html-table with 7 columns. Why are the width relative in stead of fixed. If I gave the class the properties: style="table-layout: fixed; width: 100%;" ... then all column has the same width...

What do I have to do that columns gets the right width?

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

enter image description here

Upvotes: 0

Views: 46

Answers (1)

Jack
Jack

Reputation: 3415

Try:

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

Every column will need a width though.

Upvotes: 1

Related Questions