13

Original question: Does HTML <table> have a default width?

Recently someone asked a question somewhere along these lines, and got me wondering.

Take this for example.

http://jsfiddle.net/rqmNY/1/

In this fiddle, if you were to check its width (I'm using inspect element from chrome), it shows 100px, working as intended.

Lets add a few more "td"s in, and we shall see that the "td:100px" css is being ignored.

http://jsfiddle.net/rqmNY/2/

As you can see, now it's 83px instead of 100px as originally intended.

But let's say, I move back to fewer TD's (7), and I add in a wider width to each TD element (500px), the result is that the width of the td gets stuck at 119px.

http://jsfiddle.net/rqmNY/6/

And finally, let's say I have a table of 2000px width, and td of 100px width, and many td elements. http://jsfiddle.net/rqmNY/7/

Now the table width overrides the TD width, and expands the td's width to 222px.

Can anyone explain this behavior?

p.s. Note that in all cases, inspect element tool tells me that the width is always corresponding to the css, it's just the final result not showing correctly.

LUIS PEREIRA
  • 478
  • 4
  • 20
He Hui
  • 2,196
  • 4
  • 29
  • 46
  • you could try. I've tried styling the width of the table to a certain pixel, but it's the similiar case – He Hui Feb 08 '13 at 08:36

4 Answers4

31

Have you tried adding display:inline-block to your TD CSS? That forces the browser to not ignore your TD width.

Cynthia
  • 5,273
  • 13
  • 42
  • 71
  • I'm not looking for a solution to fixing TD widths, as there are many solutions to that. My question was regarding the behavior of a table, and how does it work. – He Hui Feb 09 '13 at 06:48
  • 2
    Many times you will need to use tables when you are building email newsletters. Some email clients do not support the 'display' css property. See http://www.campaignmonitor.com/css/ for all css compatability with the most popular email clients. – tnschmidt May 15 '14 at 20:51
  • 1
    `inline-block` might fix your use case but will change the default behaviour of `table` as well for example if use have used `vertical-align: middle` it won't work in that case – Pardeep Jain Jul 20 '20 at 11:23
27

I highly believe the answer to this question is such:

The priority of widths that will affect the TD is

  1. Table Width

  2. Parent Element Width (and if none, Viewport)

  3. Element(TD) Width.

Hence if the table width is set, the TD's will ALWAYS adjust to the width of the table. However, if the width is unset, the "main" width will be the true width of the viewport. Unless the CSS code states otherwise, this holds true. And only when the total width of the TD's is smaller than that of the viewport, the elemental width will be taken into account.

Edit

  1. Table width will always override TD width.

  2. Stated TD width will only be followed until it exceeds viewport width, and viewport width will be taken as priority.

Sylk
  • 13
  • 3
He Hui
  • 2,196
  • 4
  • 29
  • 46
1

Actually the table width depends on the cell width when you do not specify the table width. But when you specify the table width it will ignore the td width. Look at the following example:

<table>
  <tr>
    <td>Column 1</td>
  </tr>
  <tr>
    <td>Column 2</td>
  </tr>
</table>

If you use 

td { 
  width:500px;
}

then the table width will be 1000px.

But if you use

table {
  width:500px;
} 
td { 
  width:500px;
}

it will ignore the <td> width and the table width will be 500px.

matthias_h
  • 11,356
  • 9
  • 22
  • 40
Md Riad Hossain
  • 291
  • 4
  • 21
  • thats is really not true. Test again what you said with different viewports, table widths, and td widths. And then check my answer. – He Hui Feb 13 '13 at 15:39
  • Check the above code to your local server. I think you don't understand my answer. Sometimes http://jsfiddle.net could not show the actual output. – Md Riad Hossain Feb 15 '13 at 16:13
  • i'm not saying you are wrong. I'm merely saying you're only partially true. Test this on your local server, a table with 20 td's. No table width defined. And each td is 200px wide. Check my answer instead. – He Hui Feb 16 '13 at 02:29
  • Take a look at your HTML here... you have two `tr`s and one `td` in each of them. That doesn't make two columns, it makes two rows with one cell each. – Victor Zamanian Sep 05 '17 at 13:25
0

According to the w3 Docs Here It says "In the absence of any width specification, table width is determined by the user agent."

What I can think of it is td width is always dependent on the table width. If you specify it or not. If you have a table with width 500px and 2 TDs with width 200px each. Now after adding these 2 TDs in table there are 100px remaining to accommodate so 50px each are added to both the TDs overwriting the original width property. See this link http://jsfiddle.net/rqmNY/7/

Raman
  • 1,336
  • 10
  • 13
  • hmm. what if someone doesnt define the table width? – He Hui Feb 08 '13 at 13:15
  • In case of absence of width property for table. Then TDs will take whatever is define for TD (because now they don't have any table width to consider) and Table width will be the combination of all the TDs widths. Hope this makes it clear, Check here http://jsfiddle.net/rqmNY/10/ – Raman Feb 11 '13 at 08:10
  • http://jsfiddle.net/rqmNY/11/ This is an update from your fiddle. You can see that because I've added 2 extra TD's into the table, the width of each TD is less than that of 200px – He Hui Feb 13 '13 at 01:03
  • This is new to me. Was not aware of this scenario. Thanks @He Hui for this update. Well i guess then it depends on the width of the parent element. Like in your example when you added 4 TDs then available width was less then 800px so TD's width was adjusted according to available width and 200px property was ignored. In the same example if we drag the HTML output part and increase the width to 800 or more then 200px width property of TDs come into action. What are your thoughts on this? – Raman Feb 13 '13 at 11:37
  • Actually I believe I know the answer. I'll just add it as an answer – He Hui Feb 13 '13 at 15:33