I have tables with table-layout set to auto. And on my table cells I have width property set. However when I inspected actuall width of cells, whey were smaller then the ones I specified. Eg:
width: 70px and actual width was <70px
What I did, I changed width to min-width, and now it seems to work. Cell width is never smaller than 70px
However I'm interested what is the implementation of table-layout: auto. For instance, do I have to specify my width properties on all cells, or only on thead>tr>th? Should I use width/min-width? I could not find detailed resource that explains how this algorithm works nor how it works in practise
Related
Maybe a silly question, but I am trying to understand some code that just writes text on screen, on an xhtml document. The text is wrapped with span tags and each word is exactly positioned on the screen using something like:
<span id="textID1" style="position:absolute; width:46px; min-width:46px; left:60px; height:22px; min-height:22px; top:90px;" >Hello</span>
My question is whether setting width equal to min-width (and also height equal to min-height) is just redundant and I could go with just one of them?
Consider the following:
1. higher value in min-width:
width: 46px;
min-width: 50px;/*this would be the element width rendered by browser*/
2. higher value in width:
width: 50px; /*this would be the element width rendered by browser*/
min-width: 46px;
So, whichever is higher value that would work as the value for the width.
But you have equal value in both width and min-width you can use just width.
And of-course this applies the same for height and min-height.
Settin min-width to the same value as width is redundant in the sense that if there are no other style sheets affecting the element, the min-width setting has no effect.
But it is not redundant in general. Some other style sheet (in theory, even a user style sheet) may set the width property to some other value. In that case, the min-width property, when set, prevents the used value of width from becoming smaller than the min-width value.
There are several things to say but I'll cut short to the straight answer:
just set width and don't set any of the others.
Short explanation:
A span has a default flow of inline. Set it with display: block or get rid of the span in favor of a div. I'd recommend that last choice.
Now, on the div, you can set height (don't set min-height).
On another note: don't set minimum values at all and use CSS classes instead of inline-styling whenever you can.
EDIT:
If you need to handle overflowing text better you MIGHT want to look into
text-overflow: ellipsis;
This only works on CSS3 capable browsers!
I would like to have an HTML element, such as a table with a min and max width; I thought I would be able to use the following two attributes in CSS:
min-width
max-width
I want my table to have a minimum width of 1000px and a maximum width of 1230px; basically I want it to grow based on whats in the table elements TD. So,
min-width: 1000px;
max-width: 1230px;
Will this work? It doesn't seem to work for me as I want so I know I don't understand something; basically my table is always 1000px and it won't grow even if I try and force the size of a TD by giving it a large width. Table basically starts like this,
<table style="min-width: 1000px;max-width: 1230px;">...
You need to add width:100% so the table tries to grow to fit its container, but is constrained by its max-width.
I want to achieve this:
I have a table for which columns I want to be able to set a fixed width each in px and % (if the content of a cell is larger than specified, the column is allowed to resize). A column I do not set a width for should resize by its content.
I tried this:
I set table-layout to fixed, and used the width style on the cells. This works perfectly when I set the width of the table as well. But I cannot set the width of the table, since it might shrink columns so that their content overflows.
Example: http://jsfiddle.net/zdY94/
I use min-width on the cells, which works only with px values and not with %. The examples are available here: px: http://jsfiddle.net/2bNAz/ %: http://jsfiddle.net/2bNAz/1/
So, is there any possibility of having a table which behaves like table-layout: auto, but with the possibility to specify the width for specific columns in px and %?
The second answer offers a workable solution Set the table column width constant regardless of the amount of text in its cells?
Put a div inside the td. you can set width on the div
<td><div style="width: 50px" > blah blah</div></td>
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.
Have you tried adding display:inline-block to your TD CSS? That forces the browser to not ignore your TD width.
I highly believe the answer to this question is such:
The priority of widths that will affect the TD is
Table Width
Parent Element Width (and if none, Viewport)
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
Table width will always override TD width.
Stated TD width will only be followed until it exceeds viewport width, and viewport width will be taken as priority.
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.
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/
I have set table-layout: fixed, width and padding for column but real width is higher per 22px than it should be. What can cause this?
You have set the table width to 1000px and cell widths in pixels, too, so that they do not add up to 1000px. Obviously, a browser has to make the cells wider or to ignore the setting on the table as a whole. It is better that you as an author make such a choice, e.g. by simply removing the width setting on the table.