td class, very confused, larger number makes width smaller?

Question

This isn't really a problem as such, but I would like to know what's going on so I can understand it. I'm currently coding a new website which has required me to use a single table in the footer of the design. (I don't often use them, but this table just makes life a lot easier for this project.) I am using a CSS class for the tables td with the only element being width:%; but for some reason I just can't understand, increasing the % from 10% to 20% actually makes the td's smaller in width. totally backwards. I'm really stumped by this one, can anyone explain this? HTML: ```

Accepted Answer

Table layout has its fans and haters, but one thing is for sure, it's an advanced maneuver. It's like a combination of forces, some weaker, some stronger, that ultimately determine your column widths. And there's a lot of input variables:

- table-layout:fixed or not

- Table has a specific width (in pixels or percent or not at all)

- Do all columns have widths?

- Is there a colgroup element in the table?

- How much space is available for the table?

- Do any cells have non-breakable content?

It's kind of a nightmare for the inexperienced.

In your particular situation you table has no specific width, meaning it'll be the sum of the widths of the columns. But the columns are sized in percentages, which would be percentages of the total table width. You can see this is a chicken-and-egg problem.

Also using percentages that don't add up to 100% is kind of undefined.

I'd take a step back and think about what you're trying to achieve exactly.

td class, very confused, larger number makes width smaller?

Solution

Problem