Why is my HTML table not respecting my CSS column width?

Question

I have a HTML table and I want the first few columns to be quite long. I am doing this in CSS:

td.longColumn
{ 
     width: 300px;
}

and here is a simplified version of my table

<table>
  <tr>
   <td class='longColumn'></td>
   <td class='longColumn'></td>
   <td class='longColumn'></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   [ . . and a bunch more columns . . .]
  </tr>
</table>

For some reason the table seems to make this column < 300px when there are a lot of columns. I basically want it to keep that width no matter what (and just increase the horizontal scroll bar).

The container that the table is inside, doesn't have any type of max width so I can't figure out why it's squeezing this column down as opposed to respecting this width.

Is there anyway around this so no matter what, this column will stay a certain width?
Here is the CSS of the outer container div:

#main
{
    margin: 22px 0 0 0;
    padding: 30px 30px 15px 30px;
    border: solid 1px #AAAAAA;
    background-color: #fff;
    margin-bottom: 30px;
    margin-left: 10px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
    float: left;
    /*width: 1020px;*/
    min-width:1020px;
    display: block;
    overflow: visible;
    z-index: 0;
}

score 135 · Accepted Answer · edited Apr 12 '21 at 21:46

135

You may get more luck with setting widths for your table cells if you apply the rule table-layout: fixed to the table - this has helped me with a lot of cell-sizing issues when using tables. I would not recommend switching to using just DIVs to arrange your content if it fits the purpose of tables - to display multidimensional data.

edited Apr 12 '21 at 21:46

Heretic Monkey

11,687
7
53
122

answered Sep 09 '11 at 10:48

aphax

2,815
3
19
12

31

I had to add `table-layout: fixed; width: 100%;` and it worked. Thanks! – nrodic Jan 18 '16 at 19:19
@nrodic Yeah It doesn't work if the table doesn't have a width set – Dusan Jovanov Nov 29 '18 at 18:01
If you have a complex layout (eg 1st row/row header with a different number of cells than than the rest), then you may also need to specify a colgroup with a width for each of your cols. – William May 31 '20 at 05:02

score 27 · Answer 2 · edited Apr 03 '17 at 20:00

27

Giving it both max-width and min-width attributes should work.

edited Apr 03 '17 at 20:00

Ben

54,723
49
178
224

answered Feb 05 '15 at 12:18

umesh

289
3
2

3

This is the best answer here. – Breno Mansur Rabelo Aug 09 '16 at 19:00
8

GOLD! Thank you SO much. Spent hours on this. Just the `min-width` was necessary for me. – poshest Sep 03 '16 at 19:15

score 18 · Answer 3 · answered Aug 24 '12 at 11:49

18

I agree with Hristo but there are some cases where table need to be used and solution to your table problem is adding below class to the table and then changing any td width as per your need.

.tables{ border-collapse:collapse; table-layout:fixed;}

I hope this helps for someone who is looking for table solution!

answered Aug 24 '12 at 11:49

Sagar Ranpise

911
1
7
9

And here I was thinking there was something **wrong** with HTML/CSS because it wasn't rendering the table columns and table at the widths specified for each in either the 'table' and 'td' tags or styles applied to same. Instead, it was just **me** being too stupid to know I should make a CSS declaration setting the 'table-layout' property to 'fixed'. What an idiot **I** am. Thanks for setting me straight - it worked perfectly when nothing else would. It even cured the problem of a drop down list control forcing a column to ~2X my desired width. – B H Dec 08 '12 at 23:03
3

Should mention that I used table-layout:fixed with width:auto to achieve my desired result. – B H Dec 08 '12 at 23:09
Hey BH and Udit my pleasure! Am glad it helped! – Sagar Ranpise Apr 30 '14 at 06:20

score 4 · Answer 4 · edited Feb 10 '14 at 18:54

4

I had the same problem with a bunch of columns where I wanted spacers columns. I used to do:

<td style='width: 10px;'>&nbsp;</td>

But when the table was wider than window, the spacers were not really 10px, but maybe 5px. And using only DIVs without a TABLE was not an option in my case. So I tried:

<td><div style='width: 10px;'></div></td>

And it worked very well ! :)

edited Feb 10 '14 at 18:54

allicarn

2,859
2
28
47

answered Nov 13 '12 at 21:32

Matt Roy

1,455
1
17
27

Using inline styling worked. I also had to adjust the column header and give the other headers styling of `width:auto;` – thekodester Jan 23 '17 at 17:41

score 2 · Answer 5 · answered May 26 '13 at 20:43

The best way to set your column widths (td's) is to use a table header (th's). Table headers will set the width on your td's automatically. You just have to make sure that your columns inside your thead are the same number of columns in your tbody.

Check it out here: http://jsfiddle.net/tKAj8/

HTML

<table>
    <thead>
        <tr>
            <th class="short-column">Short Column</th> <!-- th sets the width -->
            <th class="short-column">Short Column</th> <!-- th sets the width -->
            <th class="long-column">Long Column</th> <!-- th sets the width -->
        </tr>
    </thead>

    <tbody>
        <tr>
            <td class="lite-gray">Short Column</td> <!-- td inherits th width -->
            <td class="lite-gray">Short Column</td> <!-- td inherits th width -->
            <td class="gray">Long Column</td> <!-- td inherits th width -->
        </tr>
    </tbody>
</table>

CSS

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

.short-column { background: yellow; width: 15%; }
.long-column { background: lime; width: 70%; }

.lite-gray { background: #f2f2f2; }
.gray { background: #cccccc; }

score 1 · Answer 6 · answered May 23 '17 at 05:20

I had issues with not being able to size columns in a table-layout: fixed table that was using a colspan. For the benefit of anyone experiencing a variant of that issue where the suggestion above doesn't work, colgroup worked for me (variation on OP's code):

div {
    margin: 22px 0 0 0;
    padding: 30px 30px 15px 30px;
    border: solid 1px #AAAAAA;
    background-color: #fff;
    margin-bottom: 30px;
    margin-left: 10px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
    float: left;
    /*width: 1020px;*/
    min-width:1020px;
    display: block;
    overflow: visible;
    z-index: 0;
}
td.longColumn { 
     width: 300px;
}
table {
    border: 1px solid; 
    text-align: center;
    width: 100%;
}
td, tr {
  border: 1px solid; 
}

<div>
    <table>
        <colgroup>
            <col class='longColumn' />
            <col class='longColumn' />
            <col class='longColumn' />
            <col/>
            <col/>
            <col/>
            <col/>
        </colgroup>
        <tbody>
        <tr>
            <td colspan="7">Stuff</td>
        </tr>
        <tr>
            <td>Long Column</td>
            <td>Long Column</td>
            <td>Long Column</td>
            <td>Short</td>
            <td>Short</td>
            <td>Short</td>
            <td>Short</td>
        </tr>
        </tbody>
    </table>
</div>

score 1 · Answer 7 · answered Nov 02 '19 at 03:10

For those that are having Table Cell/Column width problems and table-layout: fixed did not help.

When applying fixed widths to table cells (<td> or <th>), do not assign a width to all of the cells. There should be at least one cell with an (auto) width. This cell will act as a filler for the remaining space of the table.

e.g.

<table>
  <thead>
    <tr>
      <th style="width: 150">Assigned 150 width to Table Header Cell</th>
      <th style="width: 100">Assigned 100 width to Table Header Cell</th>
      <th>No width assigned</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width: 150">Assigned 150 width to Table Body Cell</td>
      <td style="width: 100">Assigned 100 width to Table Body Cell</td>
      <td>No width assigned</td>
    </tr>
  </tbody>
</table>

P.S. you can use style classes here, you don't need to use an in-line style.

Cyan Baltazar · Answer 8 · 2016-12-28T05:53:19.570

0

Use table-layout property and the "fixed" value on your table.

table {
    table-layout: fixed;
    width: 300px; /* your desired width */
}

After setting up the entire width of the table, you can now setup the width in % of the td's.

td:nth-child(1), td:nth-child(2) {
    width: 15%;
}

You can learn more about in on this link: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

edited Dec 28 '16 at 05:53

answered Dec 28 '16 at 05:47

Cyan Baltazar

3,462
1
17
11

score -1 · Answer 9 · edited Feb 27 '13 at 11:27

-1

Can't modify <td> width; that is, column width isn't settable. You can add the styling white-space:nowrap; which might help. Or you can add  s to add space to columns.

Maybe you could set col width the HTML way: <td width="70%">January>/td>

Unfortunately, in HTML 4.01 and later, that way isn't valid.

edited Feb 27 '13 at 11:27

Barnee

3,212
8
41
53

answered Apr 14 '11 at 22:26

Pete Wilson

8,610
6
39
51

i see them editing it here: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_width – leora Apr 14 '11 at 22:31
@ooo - yes, but they are using the HTML way of setting width, not CSS. Maybe the OP could do it that way. – Pete Wilson Apr 14 '11 at 22:36
@ooo - OP == Original Poster, in Usenet-speak. Oh, now I see that OP is you :-) – Pete Wilson Apr 15 '11 at 00:39
i keep seeing people use that and i never know what it meant so thanks. – leora Apr 15 '11 at 01:31
2

you should never add " " to anything!! super bad.. and wrong.. its badong – Oneezy May 26 '13 at 20:18

Hristo · Answer 10 · 2013-05-27T00:36:50.543

How about something like this...

http://jsfiddle.net/qabwb/1/

HTML

<div id="wrapper">
    <div class="row">
        <div class="column first longColumn">stuff</div>
        <div class="column longColumn">more stuff</div>
        <div class="column">foo</div>
        <div class="column">jsfiddle</div>
    </div>
    <div class="row">
        <div class="column first longColumn">stuff</div>
        <div class="column longColumn">more stuff</div>
        <div class="column">foo</div>
        <div class="column">jsfiddle</div>
    </div>
    <div class="row">
        <div class="column first longColumn">stuff</div>
        <div class="column longColumn">more stuff</div>
        <div class="column">foo</div>
        <div class="column">jsfiddle</div>
    </div>
</div>

CSS

#wrapper {
    min-width: 450px;
    height: auto;
    border: 1px solid lime; 
}

.row {
    padding: 4px;   
}
.column {
    border: 1px solid orange;
    border-left: none;
    padding: 4px;
    display: table-cell;
}

.first { 
    border-left: 1px solid orange;
}

.longColumn {
    min-width: 150px;
}

There of plenty scenarios where tables are still a proper thing to use. for instance, tabular data! — Oneezy, May 26 '13 at 20:09

Why is my HTML table not respecting my CSS column width?

10 Answers10

Linked

Related