103

Please see this JSFIDDLE

td.rhead { width: 300px; }

Why doesn't the CSS width work?

<table>
<thead>
<tr>
<td class="rhead">need 300px</td>
<td colspan="7">Week #0</td>
<td colspan="7">Week #1</td>
<!-- etc..-->
</tr>
<tr>
<td class="rhead"></td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<!-- etc... -->
</tr>
<thead>
</table>

Also, what are the effects of position:fixed, absolute etc have on td widths if any? I am looking for a reason more than a fix. I am hoping to understand how it works.

td width is not 300px as desired

3
  • display: table-cell does not respect width (in the same way that it would not work for display: inline). I don't understand what you are asking about position fixed|absolute Feb 8, 2013 at 4:48
  • @ExplosionPills because in my actual code, I have the table set to fixed. As you can guess, I am trying to achieve a timeline at the top of the page. So I just stating in case position attribute affects widths.
    – Jake
    Feb 8, 2013 at 4:53
  • possible duplicate of CSS table td width - fixed, not flexible Nov 17, 2014 at 14:39

11 Answers 11

146

This may not be what you want to hear, but display: table-cell does not respect width and will be collapsed based on the width of the entire table. You can get around this easily just by having a display: block element inside of the table cell itself whose width you specify, e.g

<td><div style="width: 300px;">wide</div></td>

This shouldn't make much of a difference if the <table> itself is position: fixed or absolute because the position of the cells are all static relative to the table.

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

EDIT: I can't take credit, but as the comments say you can just use min-width instead of width on the table cell instead.

6
  • 31
    +1 - I've used this workaround before. Oddly enough, min-width on the TD does seem to work in Chrome and FF: jsfiddle.net/Mkq8L/7
    – Tim M.
    Feb 8, 2013 at 5:00
  • 2
    Actually, as always, after posting the question, I discover that min-width: 300px works! (@TimMedora you were few secs faster!)
    – Jake
    Feb 8, 2013 at 5:00
  • I think the best answer is by mentioning display: table-cell behaviour. Thanks!
    – Jake
    Feb 8, 2013 at 5:48
  • This behavior makes sense to me: what should happen if you set two different widths for two cells on the same column? With min-width there is no problem though, take the largest. Nov 17, 2014 at 14:37
  • 3
    This is a hack, I do not recommend it. The combined td width is overflowing the table width. This is the problem. You shouldn't fix this with adding more HTML structures.
    – David
    Nov 21, 2014 at 12:48
29

You're better off using table-layout: fixed

Auto is the default value and with large tables can cause a bit of client side lag as the browser iterates through it to check all the sizes fit.

Fixed is far better and renders quicker to the page. The structure of the table is dependent on the tables overall width and the width of each of the columns.

Here it is applied to the original example: JSFIDDLE, You'll note that the remaining columns are crushed and overlapping their content. We can fix that with some more CSS (all I've had to do is add a class to the first TR):

    table {
        width: 100%;
        table-layout: fixed;
    }

    .header-row > td {
        width: 100px;
    }

    td.rhead {
        width: 300px
    }

Seen in action here: JSFIDDLE

11

The reason it doesn't work in the link your provided is because you are trying to display a 300px column PLUS 52 columns the span 7 columns each. Shrink the number of columns and it works. You can't fit that many on the screen.

If you want to force the columns to fit try setting:

body {min-width:4150px;}

see my jsfiddle: http://jsfiddle.net/Mkq8L/6/ @mike I can't comment yet.

1
  • 2
    +1 for discovering that table width threshold increases with body width.
    – Jake
    Feb 8, 2013 at 5:51
8

The reason, is, because you did not specify the width of the table, and your whole bunch of td's are overflowing.

This for example, i've given the table a width of 5000px, which I thought would fit your requirements.

table{
    width:5000px;
}

It is the exact same code you provided, which I merely added in the table width.

I believe what is happening, is because your TD's are way past the default table width. Which you could see, if you pull out about 45 of your td's in each tr, (i.e. the code you provided in your question, not jsfiddle) it works exactly fine

4
  • 2
    +1 for mentioning that there is a table width threshold. Problem is sometimes we don't know the overall width before hand. What is the default table width?
    – Jake
    Feb 8, 2013 at 5:51
  • I actually don't know. All I know is if you have too many columns, the table will squash up, rendering all child node widths useless. I've encountered this before, but I"m yet to find out the default value. Maybe I should ask that as a question.
    – He Hui
    Feb 8, 2013 at 6:49
  • I believe I solved this issue stackoverflow.com/questions/14767459/…
    – He Hui
    Feb 13, 2013 at 16:12
  • This is the actual answer, instead of the highly rated one. The width can only be set, if the content doesn't overflow the whole table width.
    – David
    Nov 21, 2014 at 12:46
5

Try this it work.

<table>
<thead>
<tr>
<td width="300">need 300px</td>
2
  • Please add some explanation of why/how this code helps the OP. This will help provide an answer future viewers can learn from. See this Meta question and its answers for more information. Apr 5, 2017 at 17:21
  • 1
    Note that the width attribute of is deprecated in HTML5. Jun 29, 2017 at 6:23
5

Try to use

table {
  table-layout: auto;
}

If you use Bootstrap, class table has table-layout: fixed; by default.

4

My crazy solution.)

$(document).ready(function() {
    $("td").each(function(index) { 
    var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>";
    $(this).html(htmlText);
  });
});
4

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

2

If table width is for example 100%, try using a percentage width on td such as 20%.

2

Wrap content from first cell in div e.g. like that:

HTML:

<td><div class="rhead">a little space</div></td>

CSS:

.rhead {
  width: 300px;
}

Here is a jsfiddle.

1

You can also use:

.rhead {
    width:300px;
}

but this will only with with some browsers, if I remember correctly IE8 does not allow this. Over all, It is safer to just put the width="" attribute in the <td> itself.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.