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.
Related
How can it be that table element style width shows one number but its actual width is different? Element style says 175px but actually it is 167px
It turned out that if table width is limited then width does not honor the element style and can be smaller.
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
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.
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>
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.