I have a table inside a container with a fixed width of 500px. Inside this table, there's a cell which may contain long text, and should be set to
white-space: nowrap so the long text appears all in one line. However once nowrap is set, the table changes the size to fit all the text and ignores the 500px width.
I would like for the table to keep the width of 500px and simply show the scroll inside the cell with the long text.
Here's my jsfiddle:
https://jsfiddle.net/aqd1c8tk/
You have to mention a maximum width for the table cell. Assuming your table width is 600px, cells maximum with could be 200px. After that, you can use white-space: nowrap;.
I have updated your fiddle: https://jsfiddle.net/faridv/bphydwmx/
Related
I have a table that has the following requirements:
All columns must have variable widths
All columns must not take up more width than necessary
All cells must preserve white-spaces (white-space:pre/pre-wrap)
All cells must wrap when (and only when) exceeding maximum defined width (1000px)
I'm having trouble accomplishing rule #4.
As long as the whole width of the table fits on screen, there's no problem. However, when the available space is exceeded, the browser will do anything to make it fit by wrapping sooner than I intent. Also smaller columns will decrease in width and start to wrap.
CSS:
table {
width: auto;
}
table td {
max-width: 1000px !important;
white-space: pre-wrap;
word-break: break-word;
word-wrap: break-word;
}
HTML:
<table border="1">
<tr>
<td>Small text, should not wrap</td>
<td>Long text, should wrap at 1000px only; [...]</td>
</tr>
</table>
Please check this JSFiddle
I'm using white-space:pre-wrap, because the content must be able to wrap, even though the original data doesn't contain newlines. When I use white-space:pre, the column widths are exactly right, but obviously the content will overflow beyond the cell. I've tried to overcome this by adding overflow-wrap:break-word, but that didn't work..
Apparently there's no pure-CSS solution to this. In the meantime I've found a reliable work-around with a little bit of html and javascript.
I've put a <div> around the table, and gave it a width of number_of_columns * max_column_width, essentially the maximum width the table would have if all columns exceed the threshold.
This results in the table being rendered the way I intended, however this obviously causes a horizontal scrollbar reaching way beyond the rendered table. Therefore I need to reduce the width of the <div> to the actual width of the rendered table.
div.style.width = table.offsetWidth + 'px';
Not very elegant, but it does the job.
Open pen
Focus last cell and write some text.
Table is resizing even if all text wraps into new lines. I want to keep max-width in percentage units, and table-layout: auto.
Any idea how css prevent that odd behaviour with css? As long as text is wrapping to new line it shouldn't extend table cell.
This occurs at least in chrome and safari.
add 100% width to your div, that is 100% width of table cell within.
I have a simple table control that I have created using javascript dynamically when the website runs.
I have fixed widths for the columns using the bootstrap classes (eg col-xs-3 etc).
One of the columns in the table is a description field for which there are many entries in my data with longer text.
On a large screen it is just a single line of text so everything is fine, but when reducing the size of the window, and when using smaller devices, the width is too narrow to show the description on a single line and so will wrap around and cause the whole row to grow to fit the entire text.
Showing the entire text is not a requirement and I need to make sure the table row doesn't grow and stays a fixed height no matter the screen/window size.
Is there a way to do this in css as I do not want to insert an extra div within each cell element if i can avoid it, which i have already seen suggested on other posts.
Also, this needs to be compatible with safari and chrome.
Try this
td {
white-space: nowrap;
max-width: 200px; //or adjust for however wide you want max width to be,
//could also use % widths like max-width: 20%;
overflow: hidden;
text-overflow: ellipsis;
}
This will create a ... whenever the text is wider than the table cell.
.tr {
max-height: 50px;
overflow-y: auto;
}
You can set a text-overflow to the td element, to hide the content when it overflows the size. You just have to set a max-width to it...
Also, set the property white-space:nowrap to keep all the text in a single line.
Here's an example: http://jsfiddle.net/ev7227bd/
I have a div which contains a table, which has another div with dynamically changing text.
The div has styles
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
so I expect when the text is wider than the div it will show "..." at the end, but in real, the table width will be larger than the container div, which is really weird.
If I set the cell max-width in px or pt, which contains the div with the text, then working fine, but that's not an option.
How can set the table to follow the width of the container div and never be larger than that?
Some sample code is in a JSFiddle.
Get rid of the #c121 div's width unless you insist of having it.
Tables conform only to their content, not their wrappers.
Since it's generated markup, are you able of adding some class or properties on the elements?
Like the title says, I have a table with many rows and columns. The text within the cells will be populated dynamically. If a column has a set width and the amount of characters exceeds this width, I want the excess text to be hidden rather than the column made wider. How can i achieve this? i tried overflow:hidden in the <td> style without success.
you need to put div inside td - div can handle overflow: hidden
Or make table layout fixed using table style - this will cause table will not change columns width automatically