How can I make table column widths fixed?

Question

I have a table with two columns, first column 65%, second 35%. It perfectly fits to 100% of screen, if first column has enough text in it to fill that 65%, but if it is empty (or small amount of text) - then first column shrinks and second expands.

How can I make first column ALWAYS 65% of screen, with or without text?

http://stackoverflow.com/questions/4654481/lock-table-cells-to-their-default-size-regardless-of-content - does table-layout:fixed help here? — MyStream, Jan 11 '13 at 04:16

score 2 · Answer 1 · answered Jan 11 '13 at 04:17

Try this:

<table class="fixed_width">
    <col width="65%" />
    <col width="35%" />
    <tr>
        <td>your data</td>
        <td>your data</td>
    </tr>
</table>

And CSS:

table.fixed_width { table-layout:fixed; }
table.fixed_width td { overflow: hidden; }

score 0 · Answer 2 · answered Jan 11 '13 at 04:16

0

<table>
    <tr>
        <td style="width: 65%;">
            first column
        </td>
        <td style="width: 35%;">
            second column
        </td>
    </tr>
</table>

The first column will always stay 65% unless, you put something inside that is larger then 65% (a large picture for example)

answered Jan 11 '13 at 04:16

Andrew Wei

1,818
13
25

Thanks. But this is not working. I made first and now it works!
– Владимир Романов Jan 11 '13 at 04:19

Kevin Boucher · Answer 3 · 2013-01-11T04:23:10.150

0

Try adding this CSS:

table {
    table-layout: fixed;
    empty-cells: show;
}

https://developer.mozilla.org/en-US/docs/CSS/empty-cells

https://developer.mozilla.org/en-US/docs/CSS/table-layout

@kalpesh's recommendation for <colgroup> is a good one too.

https://developer.mozilla.org/en-US/docs/HTML/Element/colgroup

edited Jan 11 '13 at 04:23

answered Jan 11 '13 at 04:17

Kevin Boucher

14,990
3
40
54

Can you explain what they do? – MyStream Jan 11 '13 at 04:18
1

@MyStream I updated my answer with references and a comment on a subsequent answer. – Kevin Boucher Jan 11 '13 at 04:20

score 0 · Answer 4 · answered Jan 11 '13 at 04:38

try this css :

.table {
      table-layout: fixed;
      border-collapse: collapse;
      width: 100%;
    }

    .td1 {
      border: 1px solid #000;
      width: 65%;
    }

    .td2{border: 1px solid #000;
      width: 35%;
    }

and

<table class="table">
    <tr>
        <td class="td1">data</td>
        <td class="td2">data</td>
    </tr>
</table>

How can I make table column widths fixed?

4 Answers4