CODEWITHSUNDEEP
htmlcsshtml-table
Zubzob
Zubzob

Reputation: 2743

Forcing a fixed-width table's cell to have the precise defined width

Basically I have a <table> taking up the whole available width of the screen. Sometimes I might have many cells, thus providing a base width to each <col> is helpful, to make sure it won't truncate badly.

I also, no matter the case, have a checkbox as the first column. I always want this to have a 31px width (precisely 31px). I'm okay if the rest of the cells don't take their precise width, but something like a percentage of the available space, based on the specified width, something it seems to do internally right now.

Problem is, if the <table> takes the whole width of the screen (and i need it to take the whole width of the screen), and I happen to have a few coulmns (let's say 4 columns) all with a defined width, the checkbox column will be lengthier:

Here's the fiddle: http://jsfiddle.net/7wwp53aw/2/

I also included in the fiddle the desired table look.

Upvotes: 0

Views: 191

Answers (2)

no_gravity
no_gravity

Reputation: 579

Since you gave the table a width (100%) there is no reason to give every cell a width. Leave the width for the cells where you don't care and it works:

http://jsfiddle.net/7wwp53aw/7/

    <colgroup>
        <col style="width: 31px;">
        <col>
        <col>
        <col>
    </colgroup>

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196306

You need to allow at least one of the columns to be free of width.
If they all have a width defined then it is used as a ratio of the whole table to use..

<colgroup>
    <col style="width: 31px;">
    <col>
    <col style="width: 100px;">
    <col style="width: 100px;">
</colgroup>

Or you can leave all but one, so that they get auto-width based on contents..

<colgroup>
    <col style="width: 31px;">
    <col>
    <col>
    <col>
</colgroup>

Demo at http://jsfiddle.net/gaby/7wwp53aw/8/

Upvotes: 2

Related Questions