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












5















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/










share|improve this question

























  • 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


















5















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/










share|improve this question

























  • 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
















5












5








5








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/










share|improve this 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:



<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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 1 at 22:49









Brian Tompsett - 汤莱恩

4,2421338102




4,2421338102










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





















  • 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














2 Answers
2






active

oldest

votes


















1














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.






share|improve this answer


























  • 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



















1














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.






share|improve this answer
























  • 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













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
});


}
});














draft saved

draft discarded


















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









1














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.






share|improve this answer


























  • 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
















1














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.






share|improve this answer


























  • 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














1












1








1







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.






share|improve this answer















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.







share|improve this answer














share|improve this answer



share|improve this answer








edited Apr 10 '12 at 23:53

























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



















  • 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













1














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.






share|improve this answer
























  • 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


















1














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.






share|improve this answer
























  • 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
















1












1








1







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.






share|improve this 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.







share|improve this answer












share|improve this answer



share|improve this answer










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





















  • 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




















draft saved

draft discarded




















































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.




draft saved


draft discarded














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





















































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







Popular posts from this blog

'app-layout' is not a known element: how to share Component with different Modules

android studio warns about leanback feature tag usage required on manifest while using Unity exported app?

WPF add header to Image with URL pettitions [duplicate]