Mixing
td class, very confused, larger number makes width smaller?
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:
<div class="footertable">
<table border="2">
<tbody>
<tr>
<td valign="top" class="footer">
<div class="footerheading">SHOPPING</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">CUSTOMER SERVICE</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">PAYMENT OPTIONS</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">SOCIAL</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">ORDER</div>
</td>
</tr>
</tbody>
</table>
</div>
CSS:
.footertable { margin:auto; max-width:1080px;}
td.footer {width:10%;}
Notes:
- The strange behavior happens for percentages lower than 24: from 15 to 23 the total width decreases, and from 23 to 24 it suddenly expands. For percentages higher than 24, you have normal behavior.
- It doen't matter if you specify max-width or just width for the table
- The problem is reproduceable in chrome, firefox, opera and IE9
- jsFiddle here: http://jsfiddle.net/BPygA/
html css html-table
edited Jan 1 at 22:49
Brian Tompsett - 汤莱恩
4,2421338102
asked Apr 10 '12 at 22:26
GibsonFXGibsonFX
4721422
|
show 2 more comments
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:
<div class="footertable">
<table border="2">
<tbody>
<tr>
<td valign="top" class="footer">
<div class="footerheading">SHOPPING</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">CUSTOMER SERVICE</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">PAYMENT OPTIONS</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">SOCIAL</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">ORDER</div>
</td>
</tr>
</tbody>
</table>
</div>
CSS:
.footertable { margin:auto; max-width:1080px;}
td.footer {width:10%;}
Notes:
- The strange behavior happens for percentages lower than 24: from 15 to 23 the total width decreases, and from 23 to 24 it suddenly expands. For percentages higher than 24, you have normal behavior.
- It doen't matter if you specify max-width or just width for the table
- The problem is reproduceable in chrome, firefox, opera and IE9
- jsFiddle here: http://jsfiddle.net/BPygA/
html css html-table
edited Jan 1 at 22:49
Brian Tompsett - 汤莱恩
4,2421338102
asked Apr 10 '12 at 22:26
GibsonFXGibsonFX
4721422
Could you post up the html and css so we can have a look? jsfiddle.net is really handy for sharing these snippets
– Luke Merrett
Apr 10 '12 at 22:27
But please post the code here, not just over at JS Fiddle.
– David Thomas
Apr 10 '12 at 22:28
1
Tables for layout really don't make life easier (unless you code for email clients)
– F. Malina
Apr 10 '12 at 22:29
jsfiddle.net/BPygA
– GibsonFX
Apr 10 '12 at 22:31
Now I understand correctly the problem, I am not able to understand what's going on. I will add notes to your question and delete my answer.
– Benjamin Crouzier
Apr 10 '12 at 23:05
|
show 2 more comments
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:
<div class="footertable">
<table border="2">
<tbody>
<tr>
<td valign="top" class="footer">
<div class="footerheading">SHOPPING</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">CUSTOMER SERVICE</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">PAYMENT OPTIONS</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">SOCIAL</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">ORDER</div>
</td>
</tr>
</tbody>
</table>
</div>
CSS:
.footertable { margin:auto; max-width:1080px;}
td.footer {width:10%;}
Notes:
- The strange behavior happens for percentages lower than 24: from 15 to 23 the total width decreases, and from 23 to 24 it suddenly expands. For percentages higher than 24, you have normal behavior.
- It doen't matter if you specify max-width or just width for the table
- The problem is reproduceable in chrome, firefox, opera and IE9
- jsFiddle here: http://jsfiddle.net/BPygA/
html css html-table
edited Jan 1 at 22:49
Brian Tompsett - 汤莱恩
4,2421338102
asked Apr 10 '12 at 22:26
GibsonFXGibsonFX
4721422
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:
<div class="footertable">
<table border="2">
<tbody>
<tr>
<td valign="top" class="footer">
<div class="footerheading">SHOPPING</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">CUSTOMER SERVICE</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">PAYMENT OPTIONS</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">SOCIAL</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">ORDER</div>
</td>
</tr>
</tbody>
</table>
</div>
CSS:
.footertable { margin:auto; max-width:1080px;}
td.footer {width:10%;}
Notes:
- The strange behavior happens for percentages lower than 24: from 15 to 23 the total width decreases, and from 23 to 24 it suddenly expands. For percentages higher than 24, you have normal behavior.
- It doen't matter if you specify max-width or just width for the table
- The problem is reproduceable in chrome, firefox, opera and IE9
- jsFiddle here: http://jsfiddle.net/BPygA/
html css html-table
html css html-table
edited Jan 1 at 22:49
Brian Tompsett - 汤莱恩
4,2421338102
asked Apr 10 '12 at 22:26
GibsonFXGibsonFX
4721422
edited Jan 1 at 22:49
Brian Tompsett - 汤莱恩
4,2421338102
asked Apr 10 '12 at 22:26
GibsonFXGibsonFX
4721422
edited Jan 1 at 22:49
Brian Tompsett - 汤莱恩
4,2421338102
edited Jan 1 at 22:49
Brian Tompsett - 汤莱恩
4,2421338102
edited Jan 1 at 22:49
Brian Tompsett - 汤莱恩
4,2421338102
4,2421338102
asked Apr 10 '12 at 22:26
GibsonFXGibsonFX
4721422
asked Apr 10 '12 at 22:26
GibsonFXGibsonFX
4721422
asked Apr 10 '12 at 22:26
GibsonFXGibsonFX
4721422
4721422
Could you post up the html and css so we can have a look? jsfiddle.net is really handy for sharing these snippets
– Luke Merrett
Apr 10 '12 at 22:27
But please post the code here, not just over at JS Fiddle.
– David Thomas
Apr 10 '12 at 22:28
1
Tables for layout really don't make life easier (unless you code for email clients)
– F. Malina
Apr 10 '12 at 22:29
jsfiddle.net/BPygA
– GibsonFX
Apr 10 '12 at 22:31
Now I understand correctly the problem, I am not able to understand what's going on. I will add notes to your question and delete my answer.
– Benjamin Crouzier
Apr 10 '12 at 23:05
|
show 2 more comments
Could you post up the html and css so we can have a look? jsfiddle.net is really handy for sharing these snippets
– Luke Merrett
Apr 10 '12 at 22:27
But please post the code here, not just over at JS Fiddle.
– David Thomas
Apr 10 '12 at 22:28
1
Tables for layout really don't make life easier (unless you code for email clients)
– F. Malina
Apr 10 '12 at 22:29
jsfiddle.net/BPygA
– GibsonFX
Apr 10 '12 at 22:31
Now I understand correctly the problem, I am not able to understand what's going on. I will add notes to your question and delete my answer.
– Benjamin Crouzier
Apr 10 '12 at 23:05
Could you post up the html and css so we can have a look? jsfiddle.net is really handy for sharing these snippets
– Luke Merrett
Apr 10 '12 at 22:27
Could you post up the html and css so we can have a look? jsfiddle.net is really handy for sharing these snippets
– Luke Merrett
Apr 10 '12 at 22:27
But please post the code here, not just over at JS Fiddle.
– David Thomas
Apr 10 '12 at 22:28
But please post the code here, not just over at JS Fiddle.
– David Thomas
Apr 10 '12 at 22:28
1
1
Tables for layout really don't make life easier (unless you code for email clients)
– F. Malina
Apr 10 '12 at 22:29
Tables for layout really don't make life easier (unless you code for email clients)
– F. Malina
Apr 10 '12 at 22:29
jsfiddle.net/BPygA
– GibsonFX
Apr 10 '12 at 22:31
jsfiddle.net/BPygA
– GibsonFX
Apr 10 '12 at 22:31
Now I understand correctly the problem, I am not able to understand what's going on. I will add notes to your question and delete my answer.
– Benjamin Crouzier
Apr 10 '12 at 23:05
Now I understand correctly the problem, I am not able to understand what's going on. I will add notes to your question and delete my answer.
– Benjamin Crouzier
Apr 10 '12 at 23:05
|
show 2 more comments
2 Answers
2
active
oldest
votes
I can see the behavior switching between 10 and 20% width on the table cells.
Adding a width to the table itself (not the containing DIV) changes the behavior:
http://jsfiddle.net/BPygA/2/
Without a width on the table itself, the browser is making a best guess on how to display the cells based on their content. I'm not sure why it chooses a smaller width when the percentage is set to a larger number, but it's a non-deterministic calculation so the browser is free to do what it wants (see spec below).
In other words, without a width on the table you are telling the browser that each cell is 10% of a variable value that it is free to determine.
Another consideration may be that the table has 5 cells. Setting each one to 10% results in a total width of only 50%. Once again, the browser has to guess about the total width, but also has to determine what to do with the remaining 50% that is not accounted for.
As @Jacob pointed out the W3 defines recommendations (but only recommendations) to guide user agents in how to render tables.
This algorithm reflects the behavior of several popular HTML user
agents at the writing of this specification. UAs are not required to
implement this algorithm to determine the table layout in the case
that 'table-layout' is 'auto'; they can use any other algorithm even
if it results in different behavior.
The UA should try to use the requested percentage, but it may not always be possible.
A percentage value for a column width is relative to the table width.
If the table has 'width: auto', a percentage represents a constraint
on the column's width, which a UA should try to satisfy. (Obviously,
this is not always possible: if the column's width is '110%', the
constraint cannot be satisfied.)
http://w3.org/TR/CSS2/tables.html#propdef-table-layout
I would be curious as to a better explanation.
answered Apr 10 '12 at 23:42
Tim MedoraTim Medora
47.1k997136
You may want to look at w3.org/TR/CSS2/tables.html#propdef-table-layout. Fixed versus auto width has different recommended algorithms in the spec; it's basically up to the browser vendor to decide how to calculate the widths, but they may be using this as a guideline.
– Jacob
Apr 10 '12 at 23:45
Good link. I will add that to my answer.
– Tim Medora
Apr 10 '12 at 23:49
add a comment |
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.
answered Apr 11 '12 at 0:27
jpsimonsjpsimons
19.8k32844
20% was my aimed width divided by 5 = 100%, the width was defined by the constraining max-width:1080px; please do not confuse me for an inexperienced table user, I built many sites using nothing but tables when it was still standard practice. The reason I did not apply a width to the table itself is because of an error I got while validating code via w3c that said the width element in tables was being phased out and that I should use css to control width instead, so that's what I did. Perhaps I read it wrong
– GibsonFX
Apr 11 '12 at 1:50
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f10097353%2ftd-class-very-confused-larger-number-makes-width-smaller%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I can see the behavior switching between 10 and 20% width on the table cells.
Adding a width to the table itself (not the containing DIV) changes the behavior:
http://jsfiddle.net/BPygA/2/
Without a width on the table itself, the browser is making a best guess on how to display the cells based on their content. I'm not sure why it chooses a smaller width when the percentage is set to a larger number, but it's a non-deterministic calculation so the browser is free to do what it wants (see spec below).
In other words, without a width on the table you are telling the browser that each cell is 10% of a variable value that it is free to determine.
Another consideration may be that the table has 5 cells. Setting each one to 10% results in a total width of only 50%. Once again, the browser has to guess about the total width, but also has to determine what to do with the remaining 50% that is not accounted for.
As @Jacob pointed out the W3 defines recommendations (but only recommendations) to guide user agents in how to render tables.
This algorithm reflects the behavior of several popular HTML user
agents at the writing of this specification. UAs are not required to
implement this algorithm to determine the table layout in the case
that 'table-layout' is 'auto'; they can use any other algorithm even
if it results in different behavior.
The UA should try to use the requested percentage, but it may not always be possible.
A percentage value for a column width is relative to the table width.
If the table has 'width: auto', a percentage represents a constraint
on the column's width, which a UA should try to satisfy. (Obviously,
this is not always possible: if the column's width is '110%', the
constraint cannot be satisfied.)
http://w3.org/TR/CSS2/tables.html#propdef-table-layout
I would be curious as to a better explanation.
answered Apr 10 '12 at 23:42
Tim MedoraTim Medora
47.1k997136
You may want to look at w3.org/TR/CSS2/tables.html#propdef-table-layout. Fixed versus auto width has different recommended algorithms in the spec; it's basically up to the browser vendor to decide how to calculate the widths, but they may be using this as a guideline.
– Jacob
Apr 10 '12 at 23:45
Good link. I will add that to my answer.
– Tim Medora
Apr 10 '12 at 23:49
add a comment |
I can see the behavior switching between 10 and 20% width on the table cells.
Adding a width to the table itself (not the containing DIV) changes the behavior:
http://jsfiddle.net/BPygA/2/
Without a width on the table itself, the browser is making a best guess on how to display the cells based on their content. I'm not sure why it chooses a smaller width when the percentage is set to a larger number, but it's a non-deterministic calculation so the browser is free to do what it wants (see spec below).
In other words, without a width on the table you are telling the browser that each cell is 10% of a variable value that it is free to determine.
Another consideration may be that the table has 5 cells. Setting each one to 10% results in a total width of only 50%. Once again, the browser has to guess about the total width, but also has to determine what to do with the remaining 50% that is not accounted for.
As @Jacob pointed out the W3 defines recommendations (but only recommendations) to guide user agents in how to render tables.
This algorithm reflects the behavior of several popular HTML user
agents at the writing of this specification. UAs are not required to
implement this algorithm to determine the table layout in the case
that 'table-layout' is 'auto'; they can use any other algorithm even
if it results in different behavior.
The UA should try to use the requested percentage, but it may not always be possible.
A percentage value for a column width is relative to the table width.
If the table has 'width: auto', a percentage represents a constraint
on the column's width, which a UA should try to satisfy. (Obviously,
this is not always possible: if the column's width is '110%', the
constraint cannot be satisfied.)
http://w3.org/TR/CSS2/tables.html#propdef-table-layout
I would be curious as to a better explanation.
answered Apr 10 '12 at 23:42
Tim MedoraTim Medora
47.1k997136
You may want to look at w3.org/TR/CSS2/tables.html#propdef-table-layout. Fixed versus auto width has different recommended algorithms in the spec; it's basically up to the browser vendor to decide how to calculate the widths, but they may be using this as a guideline.
– Jacob
Apr 10 '12 at 23:45
Good link. I will add that to my answer.
– Tim Medora
Apr 10 '12 at 23:49
add a comment |
I can see the behavior switching between 10 and 20% width on the table cells.
Adding a width to the table itself (not the containing DIV) changes the behavior:
http://jsfiddle.net/BPygA/2/
Without a width on the table itself, the browser is making a best guess on how to display the cells based on their content. I'm not sure why it chooses a smaller width when the percentage is set to a larger number, but it's a non-deterministic calculation so the browser is free to do what it wants (see spec below).
In other words, without a width on the table you are telling the browser that each cell is 10% of a variable value that it is free to determine.
Another consideration may be that the table has 5 cells. Setting each one to 10% results in a total width of only 50%. Once again, the browser has to guess about the total width, but also has to determine what to do with the remaining 50% that is not accounted for.
As @Jacob pointed out the W3 defines recommendations (but only recommendations) to guide user agents in how to render tables.
This algorithm reflects the behavior of several popular HTML user
agents at the writing of this specification. UAs are not required to
implement this algorithm to determine the table layout in the case
that 'table-layout' is 'auto'; they can use any other algorithm even
if it results in different behavior.
The UA should try to use the requested percentage, but it may not always be possible.
A percentage value for a column width is relative to the table width.
If the table has 'width: auto', a percentage represents a constraint
on the column's width, which a UA should try to satisfy. (Obviously,
this is not always possible: if the column's width is '110%', the
constraint cannot be satisfied.)
http://w3.org/TR/CSS2/tables.html#propdef-table-layout
I would be curious as to a better explanation.
answered Apr 10 '12 at 23:42
Tim MedoraTim Medora
47.1k997136
I can see the behavior switching between 10 and 20% width on the table cells.
Adding a width to the table itself (not the containing DIV) changes the behavior:
http://jsfiddle.net/BPygA/2/
Without a width on the table itself, the browser is making a best guess on how to display the cells based on their content. I'm not sure why it chooses a smaller width when the percentage is set to a larger number, but it's a non-deterministic calculation so the browser is free to do what it wants (see spec below).
In other words, without a width on the table you are telling the browser that each cell is 10% of a variable value that it is free to determine.
Another consideration may be that the table has 5 cells. Setting each one to 10% results in a total width of only 50%. Once again, the browser has to guess about the total width, but also has to determine what to do with the remaining 50% that is not accounted for.
As @Jacob pointed out the W3 defines recommendations (but only recommendations) to guide user agents in how to render tables.
This algorithm reflects the behavior of several popular HTML user
agents at the writing of this specification. UAs are not required to
implement this algorithm to determine the table layout in the case
that 'table-layout' is 'auto'; they can use any other algorithm even
if it results in different behavior.
The UA should try to use the requested percentage, but it may not always be possible.
A percentage value for a column width is relative to the table width.
If the table has 'width: auto', a percentage represents a constraint
on the column's width, which a UA should try to satisfy. (Obviously,
this is not always possible: if the column's width is '110%', the
constraint cannot be satisfied.)
http://w3.org/TR/CSS2/tables.html#propdef-table-layout
I would be curious as to a better explanation.
answered Apr 10 '12 at 23:42
Tim MedoraTim Medora
47.1k997136
edited Apr 10 '12 at 23:53
answered Apr 10 '12 at 23:42
Tim MedoraTim Medora
47.1k997136
answered Apr 10 '12 at 23:42
Tim MedoraTim Medora
47.1k997136
answered Apr 10 '12 at 23:42
Tim MedoraTim Medora
47.1k997136
47.1k997136
You may want to look at w3.org/TR/CSS2/tables.html#propdef-table-layout. Fixed versus auto width has different recommended algorithms in the spec; it's basically up to the browser vendor to decide how to calculate the widths, but they may be using this as a guideline.
– Jacob
Apr 10 '12 at 23:45
Good link. I will add that to my answer.
– Tim Medora
Apr 10 '12 at 23:49
add a comment |
You may want to look at w3.org/TR/CSS2/tables.html#propdef-table-layout. Fixed versus auto width has different recommended algorithms in the spec; it's basically up to the browser vendor to decide how to calculate the widths, but they may be using this as a guideline.
– Jacob
Apr 10 '12 at 23:45
Good link. I will add that to my answer.
– Tim Medora
Apr 10 '12 at 23:49
You may want to look at w3.org/TR/CSS2/tables.html#propdef-table-layout. Fixed versus auto width has different recommended algorithms in the spec; it's basically up to the browser vendor to decide how to calculate the widths, but they may be using this as a guideline.
– Jacob
Apr 10 '12 at 23:45
You may want to look at w3.org/TR/CSS2/tables.html#propdef-table-layout. Fixed versus auto width has different recommended algorithms in the spec; it's basically up to the browser vendor to decide how to calculate the widths, but they may be using this as a guideline.
– Jacob
Apr 10 '12 at 23:45
Good link. I will add that to my answer.
– Tim Medora
Apr 10 '12 at 23:49
Good link. I will add that to my answer.
– Tim Medora
Apr 10 '12 at 23:49
add a comment |
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.
answered Apr 11 '12 at 0:27
jpsimonsjpsimons
19.8k32844
20% was my aimed width divided by 5 = 100%, the width was defined by the constraining max-width:1080px; please do not confuse me for an inexperienced table user, I built many sites using nothing but tables when it was still standard practice. The reason I did not apply a width to the table itself is because of an error I got while validating code via w3c that said the width element in tables was being phased out and that I should use css to control width instead, so that's what I did. Perhaps I read it wrong
– GibsonFX
Apr 11 '12 at 1:50
add a comment |
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.
answered Apr 11 '12 at 0:27
jpsimonsjpsimons
19.8k32844
20% was my aimed width divided by 5 = 100%, the width was defined by the constraining max-width:1080px; please do not confuse me for an inexperienced table user, I built many sites using nothing but tables when it was still standard practice. The reason I did not apply a width to the table itself is because of an error I got while validating code via w3c that said the width element in tables was being phased out and that I should use css to control width instead, so that's what I did. Perhaps I read it wrong
– GibsonFX
Apr 11 '12 at 1:50
add a comment |
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.
answered Apr 11 '12 at 0:27
jpsimonsjpsimons
19.8k32844
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.
answered Apr 11 '12 at 0:27
jpsimonsjpsimons
19.8k32844
answered Apr 11 '12 at 0:27
jpsimonsjpsimons
19.8k32844
answered Apr 11 '12 at 0:27
jpsimonsjpsimons
19.8k32844
answered Apr 11 '12 at 0:27
jpsimonsjpsimons
19.8k32844
19.8k32844
20% was my aimed width divided by 5 = 100%, the width was defined by the constraining max-width:1080px; please do not confuse me for an inexperienced table user, I built many sites using nothing but tables when it was still standard practice. The reason I did not apply a width to the table itself is because of an error I got while validating code via w3c that said the width element in tables was being phased out and that I should use css to control width instead, so that's what I did. Perhaps I read it wrong
– GibsonFX
Apr 11 '12 at 1:50
add a comment |
20% was my aimed width divided by 5 = 100%, the width was defined by the constraining max-width:1080px; please do not confuse me for an inexperienced table user, I built many sites using nothing but tables when it was still standard practice. The reason I did not apply a width to the table itself is because of an error I got while validating code via w3c that said the width element in tables was being phased out and that I should use css to control width instead, so that's what I did. Perhaps I read it wrong
– GibsonFX
Apr 11 '12 at 1:50
20% was my aimed width divided by 5 = 100%, the width was defined by the constraining max-width:1080px; please do not confuse me for an inexperienced table user, I built many sites using nothing but tables when it was still standard practice. The reason I did not apply a width to the table itself is because of an error I got while validating code via w3c that said the width element in tables was being phased out and that I should use css to control width instead, so that's what I did. Perhaps I read it wrong
– GibsonFX
Apr 11 '12 at 1:50
20% was my aimed width divided by 5 = 100%, the width was defined by the constraining max-width:1080px; please do not confuse me for an inexperienced table user, I built many sites using nothing but tables when it was still standard practice. The reason I did not apply a width to the table itself is because of an error I got while validating code via w3c that said the width element in tables was being phased out and that I should use css to control width instead, so that's what I did. Perhaps I read it wrong
– GibsonFX
Apr 11 '12 at 1:50
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f10097353%2ftd-class-very-confused-larger-number-makes-width-smaller%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Could you post up the html and css so we can have a look? jsfiddle.net is really handy for sharing these snippets
– Luke Merrett
Apr 10 '12 at 22:27
But please post the code here, not just over at JS Fiddle.
– David Thomas
Apr 10 '12 at 22:28
1
Tables for layout really don't make life easier (unless you code for email clients)
– F. Malina
Apr 10 '12 at 22:29
jsfiddle.net/BPygA
– GibsonFX
Apr 10 '12 at 22:31
Now I understand correctly the problem, I am not able to understand what's going on. I will add notes to your question and delete my answer.
– Benjamin Crouzier
Apr 10 '12 at 23:05