How to create the one-row table, that has fixed TR height (the limit is two rows), but each TD has flexible width and forced word-wrapping.
The main question: is it possible to force each TD to use always the complete height (use two rows) when there is more then one word, i. e. if TD contains one word it should be displayed in one row, if TD contains more then one word it should be displayed in two rows (in this case browser should set the TD width automatically).
This appears to be impossible. The table layout mechanism tries to avoid line breaks inside cells when there is enough horizontal space. By setting e.g. width: 0 on the cells, you could override this so that the browser makes each cell as narrow as possible (effectively, as wide as the widest word, in the case of pure text content), but then e.g. three words make three lines, causing the height setting to be overridden.
If you specify the context and purpose of wanting such a layout, perhaps a new, solvable problem can be formulated.
Related
I'm posting a screenshot of the element in question. You should be able to see, I am applying element-specific styling removing all margin, padding and setting the width to 0px. No matter what I do, this table data element is abnormally large. I want to significantly reduce its width, but it won't listen to me. I have the feeling this is some obscure HTML algorithm that I know nothing of but can't say. Any ideas?
Update: The answer was that HTML will make sure the table data elements take up the entire width of the table, no matter if you try to narrow individual elements (so in essence, it was some weird HTML algorithm or functionality). That said, I will accept the answer below because it is so thorough it should cover the other possible issues people may run into.
There is some obscurity to how the width of a table cell (<td>) is defined, as official documentation is unclear and allows some behavior to be defined by the browser. But here are a few characteristics that appear stable across the spectrum of browsers.
Managing the Width of HTML Table Cells <td>
Table with Single Cell
In a table that consists of a single cell – in other words, a table with one column and one row – where the width hasn't been explicitly defined in the <table> element, the width can be controlled directly by the <td> element.
This won't work (the td rule will be ignored):
table { width: 100%;}
td {width: 300px;}
The width: 300px fails because the <table> element has a defined width.
However, this will work:
/* table { width: 100%;} */
td {width: 300px;}
DEMO
Table Column with Multiple Cells
To set the width of a table cell in a column with multiple cells the entire column must be adjusted. Any widths assigned to the individual <td>s will be ignored. Simply adjust the width of the table to adjust the width of the <td>s in the column.
DEMO
Table with Multiple Columns and Multiple Rows
To set the width of a table with multiple columns and rows, the Table Column Element (<col>) is ideal because it targets individual columns.
DEMO
The problem described in the question involves a table cell that won't accept a shorter width assignment. The first realization here is that the table cell by default expands to fill 100% of the column width allotted (learn more about <td> default width). The way to reduce the width of this cell is described above.
HOWEVER, I suspect that in some cases the person wanting to reduce the width of a table cell is actually trying to reduce the width of the content inside the cell (like an image or a form input). In these cases, adjusting the table may be unnecessary. All that would be needed is to adjust the width of the content itself, or its container (div, span, figure, etc.).
In this image, the width of the table cells are at 100%, but the width of the input fields vary.
DEMO
colspan
If in fact the need is to reduce the width of a single cell within a column of multiple cells, then you may want to consider the colspan attribute. With colspan, columns can me merged making cells wider. Cells without colspan assigned will be shorter, and appear even shorter when their adjacent cells are hidden.
In this image, display: none has been applied to the bottom right cell of this 2-column table.
DEMO
So, in the case of your table cell that won't budge, consider adjusting the width of the <table> element (if it's a single column table), assign and adjust a <col> element (if it's a multi-column table), adjust the width of the content directly (if that's the only element you want adjusted), or use colspan.
Sorry I can't be more specific about the exact solution in your case. No code was provided for review. But hopefully one of these methods helps you out.
I'm facing a rather difficult issue at the moment; really appreciate your help.
I have a table with 2 columns, td1 and td2, and containing texts and both of which have fixed widths.
td1.width = 10px and td2.width = 20px
the fixed width are set at runtime one by one from the left using JQuery (as this table is nested inside another table...)
The text width may be longer than these fixed widths in which scenarios the expected behaviour is that
the fixed width of the columns should stay the same 1) if there are extra texts, the text should wrap, it should not increase or decrease the td width 2) if there are empty spaces, the cell width should not be reduced when resizing other columns or page; it should stay intact.
I have set the td.whitespace property to pre-wrap and td.word-wrap: break-word but they haven't helped.
how would these be possible using css 2.0 (not 3.0)?
Thanks,
In this case, because the widths are so small, and the text doesn't typically have words that small, it has no way to wrap them, so it extends the width of the td even with a set width!
It decreases the width of the second td because the first is using an extra width.
Also, you could have a situation where the text is so wide (a long word for example) and in that case there is no way to wrap it. Unless using javascript, IMO it is the only way.
I recommend reading this answers: HTML TD wrap text
ok, I got it resolved. My table had thead and colgroups. Althought their display attribute was hidden, IE 9.0 ignores it whereas IE 6.0 takes them into account in calculating the width of columns!
I removed them using jquery and sorted out!
$('.myTable thead, .myTable colgroup').remove();
I have a table with 4 columns. The first 3 columns should only take up the space they need to display the data / ui control that is placed in them, whereas the fourth column should take up the remaining space. I don't know while creating the table what widths the first three columns should be, so I can't put a "width" value in there.
If I set the fourth column to 100% width, then it squishes the first three columns too much; if there is a drop down list ("select" in html terms) in one of those columns, the last column would then force it to become somewhere around 20 pixels wide, whereas it should be as wide as the option element which has the longest text in that menu.
Other rows in the table will cells that span multiple columns, so I think I'm stuck using the table element (as opposed to divs etc)
Any ideas? IE6 is not supported by the site so whatever works in Firefox / Chrome should be good.
Try putting width:1%; white-space:nowrap; in the first three columns and leave the fourth without width
Is there a way to prioritize one table column in HTML? The thing is, I've got 4 columns, and the content may change a lot for the content in all cells. But I want the first column to take up as much space as possible, so the 3 other columns only use as much width as they need to keep everything on one line.
The table itself has a fixed width.
Assign a class to the three last cells in each row like this: <td class="tight">. Now, add CSS like this to your stylesheet:
td.tight
{
width: 1px;
white-space: nowrap;
}
The width rule instructs your cell to be as narrow as possible, and the white-space rule dictactes that the contents of the cell should never wrap across several lines.
This solution assumes, that the table is styled to have some fixed width (possible 100%).
I have a table in a HTML form. It has a fixed height for optical reasons. The number of rows in the table varies depending on the number of form fields available.
Problem: If there are very few rows, all rows are stretched vertically, increasing the space between input elements.
I could avoid this by giving the data rows a (fake) fixed height. I don't like that approach because there is no fixed height I could give it (relative font sizes, accessibility) and I fear future problems - say for example that IE9 decides to take cell heights literally.
What can I do?
I have a last (empty) row but no idea what to put in there so that it automatically occupies all "available" space.
Put heightless table in a div with a fixed height which mimics the table (border? bgcolor?).
By the way, just doing tbody { display: inline; } instead of an empty row works in all real browsers. No, not in MSIE. The tbody element has a lot of shortcomings in MSIE. It also lacks the ability to overflow: scroll; which would be great to have a scrollable table with a fixed header.
Couldn't you set the cell height to 100% for the last empty row, this should presumably cause that last row to take up the rest of the fixed space
I guess this is not doable.
Yeah, table based websites are beyond ages, however you would still need tables to display data. In fact I have to agree with Pekka that this is not doable on the table cell itself, but there is something we can fashion:
Try wrapping the data inside the td cell into a div and style that div to the height you want and set its overflow property to hidden.