Using CSS td width absolute, position

Question

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

`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` — Explosion Pills, Feb 08 '13 at 04: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 08 '13 at 04:53
possible duplicate of [CSS table td width - fixed, not flexible](http://stackoverflow.com/questions/6658947/css-table-td-width-fixed-not-flexible) — Ciro Santilli OurBigBook.com, Nov 17 '14 at 14:39

score 146 · Accepted Answer · answered Feb 08 '13 at 04:58

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.

answered Feb 08 '13 at 04:58

Explosion Pills

188,624
52
326
405

31

+1 - I've used this workaround before. Oddly enough, `min-width` on the `TD` does seem to work in Chrome and FF: http://jsfiddle.net/Mkq8L/7/ – Tim M. Feb 08 '13 at 05:00
2

Actually, as always, after posting the question, I discover that `min-width: 300px` works! (@TimMedora you were few secs faster!) – Jake Feb 08 '13 at 05:00
I think the best answer is by mentioning display: table-cell behaviour. Thanks! – Jake Feb 08 '13 at 05: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. – Ciro Santilli OurBigBook.com Nov 17 '14 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 '14 at 12:48
Using DIVs generally works well but has the disadvantage that adjacent cell content will be on different lines when copied to the clipboard. A caveat when using min-width as a workaround is that the cells are no longer a set width - they may grow with content, which also slows down rendering. Setting max-width to the same value is working for me. – Conrad Damon Aug 23 '18 at 17:05

score 29 · Answer 2 · answered Sep 17 '14 at 09:33

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

Matthew Brown · Answer 3 · 2013-02-08T05:00:22.793

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.

edited Feb 08 '13 at 05:00

answered Feb 08 '13 at 04:46

Matthew Brown

142
1
17

2

+1 for discovering that table width threshold increases with body width. – Jake Feb 08 '13 at 05:51

score 8 · Answer 4 · answered Feb 08 '13 at 05:03

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

answered Feb 08 '13 at 05:03

He Hui

2,196
4
29
46

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 08 '13 at 05: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 08 '13 at 06:49
I believe I solved this issue http://stackoverflow.com/questions/14767459/does-html-table-tag-have-a-default-width/14857179#14857179 – He Hui Feb 13 '13 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 '14 at 12:46

score 5 · Answer 5 · answered Feb 08 '13 at 04:46

5

Try this it work.

<table>
<thead>
<tr>
<td width="300">need 300px</td>

answered Feb 08 '13 at 04:46

amirali shahinpour

189
2
13

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](http://meta.stackoverflow.com/q/256359/215552) for more information. – Heretic Monkey Apr 05 '17 at 17:21
1

Note that the width attribute of is deprecated in HTML5. – simhumileco Jun 29 '17 at 06:23

sambrmg · Answer 6 · 2018-10-02T18:49:48.863

5

Try to use

table {
  table-layout: auto;
}

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

edited Oct 02 '18 at 18:49

answered Aug 14 '14 at 17:52

sambrmg

51
1
3

score 4 · Answer 7 · answered Feb 18 '14 at 13:39

4

My crazy solution.)

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

answered Feb 18 '14 at 13:39

mathewsun

373
6
14

score 4 · Answer 8 · answered Dec 28 '16 at 05:52

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

score 2 · Answer 9 · answered Oct 07 '16 at 09:30

2

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

answered Oct 07 '16 at 09:30

Dally S

619
9
11

score 2 · Answer 10 · answered Apr 05 '17 at 12:17

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.

answered Apr 05 '17 at 12:17

simhumileco

31,877
16
137
115

score 1 · Answer 11 · edited Feb 24 '14 at 08:01

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.

edited Feb 24 '14 at 08:01

avrahamcool

13,888
5
47
58

answered Feb 08 '13 at 04:53

KernelCurry

1,297
1
13
31

Using CSS td width absolute, position

11 Answers11

Linked