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>
Related
Is it possible to use
table-layout: fixed;
width: 100%;
On a table, yet have the columns auto size to best fit the content as a table would if not set to fixed?
The table needs to be set to fixed so it does not increase in width greater than it's parent.
Or, put differently:
Is it possible to use table-layout:auto but set a max width which will be adhered to even if a long string with no spaces is held in the table.
No, you cannot combine the two different table layout modes. In automatic layout (table-layout: auto, the default), the column widths are selected by the browser so that are big enough for all content in the cells; any width settings you make will be taken just as minimum widths that may make the column wider than they would otherwise be. This also means that any width setting for the table will be exceeded when necessary for the purpose. In fixed layout (table-layout: fixed), cell content is not taken into account at all. Specified widths will be used or, in the absence of width settings, the total width is divided evenly to the columns.
The conclusion is that when you want automatic layout, or “best fit”, but do not want to exceed some given limit, you need to make sure that the sum of column width requirements does not exceed it. For example, if you have a long string with no spaces, consider inserting optional line breaks at suitable places e.g. with or <wbr>, if the content permits breaks.
You may also consider setting a maximum width for the content of a cell. This cannot be set directly (in automatic layout), but can be done by using <td><div>…</div></td> and setting the constraint on the div. If there is e.g. a long indivisible string in the content, the content will overflow by default, but the table cell will still have width determined by the width constraint.
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.
Why are web browsers ignoring the max-width property in percents and apply the max-width property in px for table cells?
For example:
<td style="max-width:10%;word-wrap:break-word;">veryLongTextWithoutSpace</td>
will be ignored, and table cell content will not wrap.
But,
<td style="max-width=60px;word-wrap:break-word;">veryLongTextWithoutSpace</td>
will be applied and table cell content is wrapping.
UPD: More about my case and table-layout: fixed
table-layout: fixed with sets width to table header (th tags) it's real good solution.
But, unfortunately, my case is crazy.
The table generates by custom tag (uses jsp technics), and I can't set the style for the table header (th tags), but I can set the style for each row and column.
At result, table-layout: fixed sets all columns with same width.
Full Example: http://jsfiddle.net/h3cxc/1/ (without table-layout:fixed)
http://jsfiddle.net/h3cxc/ (with table-layout:fixed)
Any idea how to fix this issue (max-width in percents) ?
Your second example has a typo/error and can't possibly work since you are using = instead of : .
On to the question:
Add table-layout:fixed to your table.
With this (fast) algorithm, the horizontal layout of the table does
not depend on the contents of the
cells; it only depends on the table's
width, the width of the columns, and
borders or cell spacing.
http://www.w3.org/TR/CSS2/tables.html#propdef-table-layout
Check sample: http://jsfiddle.net/easwee/UuVq6/9/
I'm trying to make a table that stretches 100% of the page (or whatever container it's in, depending on where I use it).
When I specify the width of the table to 100%, it automatically resizes the columns based on the width of their content. This is nice most of the time when I wouldn't mind different width columns, but for this, I need all of the columns to be the same width. I know that I could specify a percentage width for the columns, but I need this to work for any number of columns.
Here's my code so far: http://jsfiddle.net/zwWHZ/2/
Is it possible to have a table with a width of 100% and equal column widths without having to specify the percent for each column with pure CSS?
I tried putting table-layout: fixed; into the table section of the CSS, and that appeared to work (even when I changed the number of columns). The source where I found that is here.