I've got a fixed width table ( style="width: 100%" ) with dynamic data being placed into the cells. The data varies greatly in terms of width, and some strings exceed the length of the table without spaces. Therefore, I've used table { table-layout:fixed; word-wrap: break-word; } to wrap the text in the columns, and keep the table from exceeding the page width.
However, this results in equally spaced columns, which is not an optimal use of the space of my table, resulting in some cells that are wrapped two or three times, and others that have one word in all that space.
Is there a way to keep a maximum table width, break words, and utilize the browsers layout optimizations for variable width columns?
If you have a column that you always expect to be larger than the others, you should indicate with e.g. <td width="40%">. Also, if there is a column which will always be small, you can set a width to that as well. The more clues you give the browser, the better the layout will look.
Related
I want to set up a certain CSS layout described by the following:
it is table-structured, so there are a number of rows each having certain amount of cells; cells borders in different rows possibly do not align;
it is fullscreen; not like occupying whole device display, but rather using all the window space present - the window height should be divided in rows and its length should be divided in cells (full-window would be a more precise term)
it is adaptive; meaning, heights and lengths are given as percentage from window dimensions; this also applies to margins, paddings, etc.
More accurately, I am trying to make a web-chat application consisting of message area, list of online users, text input and "send" button. I want each of these components to have space of certain (relative to window dimesions) length between them and between window borders and components adjacent to them (that is, margins). I want this layout to persist precisely after zooming or resizing the window.
I do realize that this could be achieved with Javascript (which I am capable of), but I assume that would be ugly and less efficient, so I would like to use CSS (if possible).
So far I tried:
marking up the window with inline-block wrappers containing the actual visible elements; didn't really work because setting wrapped content's width and height to 100% results in them expanding the wrappers (regarding borders and margins), which ruins the layout instantly; I understand I could try 98%, 97.5%, 97.2%, etc. but this is not precise so it really bugs me
using floating divs (same as above)
using table, table-row and table-cell divs; did not satisfy my requirements because only absolute values work this way
I am really a newb, so I might have missed a number of obvious points here.
Could you use the vh and vw measurments,
they can be used like this:
height 10vh;
width 100vw;
this would make a row that's 1/10th of the screen tall and 100% wide.
Okay, using Javascript looks like the only reasonable option here.
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.
If I specify a width for a <th> element in a table, what does that mean in terms of the wider table if table-layout is not specified and defaults to automatic? Does such a width specify a minimum width for the entire column? If so, where is this specified - I cannot find anything in the HTML/CSS specs that says width is interpreted this way, yet Firefox and IE both seem to interpret the width this way.
To put this in context, imagine a table of numeric data (e.g. production volumes) for the days of the week. The week days are the column headings. I want to cope with two conditions:
There is no data for a particular day, but I don't want the width of the column to collapse to some ugly minimum. Rather, I want to set that minimum.
When there are large numbers in columns, I want the width of the column to automatically expand to show the number in full.
When I specify a bunch of column widths as follows...
<tr>
<th style="width:3em">Sun</th>
<th style="width:3em">Mon</th>
<th style="width:3em">Tue</th>
...etc
</tr>
... I achieve the result I'm looking for. However, can I rely on this?
Yes, you can rely on this; it’s in the CSS spec, and browsers play by the book here. For table cells, the width property sets the minimum width used in the calculation of column width.
The spec is somewhat messy here, because the description of the width property does not say this or even refer to the description (as far as I can see), but this is described in section 17.5.2.2 Automatic table layout. Item 1 in the first numbered list there says: “Calculate the minimum content width (MCW) of each cell: the formatted content may span any number of lines but may not overflow the cell box. If the specified 'width' (W) of the cell is greater than MCW, W is the minimum cell width. A value of 'auto' means that MCW is the minimum cell width.”
To set the minimum allowed width and let the fields expand wider if need be, use something like this
th {
width: auto; /* This is default, but shown here for clarity */
min-width: 100px; /* or whatever size need be */
}
I'm having trouble making a HTML table behave. It's a wide table, about 44 columns, and it's OK if it stretches way off the user's screen to the right (I want it to).
I'm trying to give each of my columns one of three widths by giving each table header one of three classes:
.c_th_small {
width: 60px;
}
.c_th_medium {
width: 100px;
}
.c_th_large {
width: 500px;
}
I put one of these three tags into my table header cells. But they only size my columns if I give my overall table a Width attribute. If I make my table really wide then these work, but they fight with the table width.
My question is, can I just tell each column how wide it should be and let that force the table to be as wide as it needs to be? I really don't want to set a width for my table, I just want it to be as wide as all the columns put together. This works fine for smaller tables, but this big table seems to resist becoming wide enough.
It sounds like you need to use the CSS rule
table { table-layout: fixed; }
This tells browsers to use the widths of the cells of the first row to determine column widths, instead of also taking account the contents of ther cells.
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.