HTML Table - Both fixed and multiple variable column widths

Question

I have to build a table with 5 columns. The table width is variable (50% of content width). Some columns contain fixed-size buttons, so those columns should have a fixed with, say 100px. Some columns have text in them, so I want those columns to have variable column widths.

For example:

Column1: 20% of (tablewidth - sum(fixedwidth_columns))'

Column2: 100px

Column3: 40% of (tablewidth - sum(fixedwidth_columns))

Column4: 200px

Column5: 40% of (tablewidth - sum(fixedwidth_columns))

What is the best way to achieve this?

Uhm, no, it doesn't work that way. A width percentage takes the percentage of the total table width, not the table width - fixedcolumns. — Basaa
– Basaa, Commented Feb 8, 2014 at 21:06

Hashem Qolami · Accepted Answer · 2014-02-08 21:19:37Z

43

You could set the table-layout: fixed for the table element, then simply set width attribute on relevant <td> or <th> elements:

table {
    table-layout: fixed;
}

JSFiddle Demo.

From the MDN:

The table-layout CSS property defines the algorithm to be used to layout the table cells, rows, and columns.

Values:

fixed:
Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

answered Feb 8, 2014 at 21:19

Hashem Qolami

99.8k27 gold badges157 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Basaa Over a year ago

This is why I love SO. Thanks alot.

LPChip Over a year ago

Great answer. Too bad Microsoft Outlook does not understand table-layout... :( +1 nevertheless

G-Cyrillus · Accepted Answer · 2014-02-08 21:26:28Z

9

to fixed width in a table, you need the table-layout propertie set to fixed; Since you mix % and px , it will not be coherent .

You may set only the px width and eventually a small value of % and let other column to use width left avalaible. example : http://jsfiddle.net/M4Et8/2/

<table style='table-layout:fixed;width:100%' border='1'>
    <tr>
        <th style='width: 20%;'>Column1</th>
        <th style='width: 100px;'>Column2</th>
        <th >Column3</th>
        <th style='width: 200px;'>Column4</th>
        <th >Column5</th>
    </tr>
</table>

answered Feb 8, 2014 at 21:26

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

1 Comment

Basaa Over a year ago

Just a tad too late, but thanks for your effort, much appreciated.

Syed Faizan Ahmed · Accepted Answer · 2020-01-10 10:24:39Z

I have applied the same solution: Used 'table-layout:fixed' and given the size to td in percentages. It worked for my static content but when my content increases it some how expands the td and all the td and tr are disturbed.

Solution:

After so much findings, i came up with the following solution, by this solution your single table will be able to display different column sizes with no expand on horizontal axis.

<table style="table-layout: fixed;">
    <tbody>
        <tr>
            <td colspan="7">
                <span>Record Name</span><br>
                <span>FUNNY FUNNEL CAKES</span>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <span>Event Name</span><br>
                <span>NATIONAL CAKE DAY CELEBRATION</span>
            </td>
            <td colspan="2">
                <span>City</span><br>
                <span>SAN DIEGO</span>
            </td>
            <td colspan="1">
                <span>Zip</span><br>
                <span>92117-4351</span>
            </td>
            <td colspan="1">
                <span>Inspection Type</span><br>
                <span>Routine</span>
            </td>
        </tr>
        <tr>
            <td colspan="6">
                <span>Owner</span><br>
                <span>PATTY CAKE</span>
            </td>
            <td colspan="1">
                <span>Inspection Status</span><br>
                <span>Complete</span>
            </td>
        </tr>
    </tbody>
</table>

Collectives™ on Stack Overflow

HTML Table - Both fixed and multiple variable column widths

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related