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.
Related
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/
I want the height of an editable textarea tag to be adjusted to the lines of text.
I tried to set the rows attribute to 1 on the textarea, to have have the default height if there's no text or only one line of text - but the textarea doesn't adjust in height automatically when there's more lines of text.
I'm not looking for expanding height while writing, I'm mainly concerned on page load.
Not possible to dynamically adjust height of textarea with only HTML/CSS.
I have been trying to lay out a table with the following:
two or three columns that automatically size to fit the content in them
anywhere from 1 to 4 columns that resize according to the width of the table, and which truncate the text inside them
one column that contains three buttons and which I want to be exactly 220 pixels wide
I got it pretty much working thanks to the answers on this question. I set "min-width" on the first two or three columns, and "width" on the last column, and in the middle columns I wrap the text in a div, and then set "max-width" on the td and on the div I set width: 100%;text-overflow: ellipsis; white-space: nowrap; overflow: hidden;. All that works fine on Chrome and Firefox and Safari and even IE 10.
The problem happens on IE7, 8, and 9. On all three "browsers", the middle divs don't truncate, they instead push out the width of columns to fit all the text, which blows out the table wider than the page.
I tried putting a table-layout: fixed; on the table on IE, but instead of getting what I expected or indeed anything sane at all, instead what I get is that all the columns are given the same width, ignoring the "width: 220px" on the last column's tds, and then after everything is laid out the last column expands to 220px, and blows out the table. If you don't understand what I'm saying, have a look at
http://jsfiddle.net/ptomblin/rHJk9/
in IE debugger or "Inspect Element" in Chrome or Firefox. If you look at the "Layout" of a td of last column, and it shows a small width same as all the other columns, even though the contents are 220px wide.
On the live site, putting the "ie8" class on the body is done using conditional <IF IE8> code, but jsfiddle doesn't seem to like that.
What I'm looking for is either a way to make the table work the same way on IE7-9 as it does on real browsers (without table-layout:fixed) or some "good enough" work-around that would at least fit on the screen, with or without table-layout:fixed.
http://imgur.com/44DeZv5 has a screen shot showing it on IE9. I've added a red line to show the actual edge of the table. Note how the button bar, which is in a td in that table, extends beyond not just the table, but beyond the actual screen width. (The browser is set to 1024x768, the table is inside a .content div that's 940 pixels wide)
http://imgur.com/0Zielaf is what it looks like in IE9 when you don't have the "table-layout: fixed"
http://imgur.com/K8Ob6VR is what it looks like on Chrome without the "table-layout: fixed". Note how it all fits on the screen and in the table. That's what I'm aiming for.
I found out what the problem was that caused table-layout: fixed to allocate all the columns exactly the same width, no matter what the width parameter on the actual column values: It was happening because the first row on the table had a single column with colspan="7". I figured it out because on W3Schools in the description of table-layout: fixed they mentioned:
The browser can begin to display the table once the first row has been received
which made me realize that it was probably only looking at the first row. I stuck in a dummy first row with empty columns, but with the appropriate classes on each one to give them appropriate widths, and it laid them out much better. (I also set the font size, height, and line-height, top and bottom margins and padding to 0 for this dummy row so it isn't distracting)
I have an HTML page with a section across the middle of it. This horizontal section uses a <table> and has a custom background image that needs to repeat horizontally across the entire section. This table has 5 elements in it. These elements are statically sized to 140px.
My problem is, I can't get the image to repeat across the remaining space. It's as if the table doesn't stretch the entire width. However, if I set the table width to 100%, the table cells grow beyond 140px.
What do I do? I want the table to fill the entire space. But I want my cells to remain a constant size, and I want the background image to be used.
Thank you!
A <table> is only as big as the cells inside it. So, if you’ve got 5 cells, each 140 pixels wide, the table will only be 700 pixels wide: it won’t stretch across the full width available to it.
You could wrap the <table> in a <div> and put the repeating background image on the <div>, if the 6th cell solution doesn’t work or isn’t preferable.
The sizes of background images are irrelevant to CSS, no help there. Maybe you can hack something in JavaScript, otherwise you will have to know how large your background image is.
Consider wrapping the middle section in a div and applying the background image to the div. Then set the width of your td elements in the table to 140px.
Here is an example. Clearly, you will need to reference your image instead of flurries.png (which is not part of the fiddle so it does not show).
Add a 6th cell and don't specify any width. This will keep the 5 cells at 140px and the 6th cell will be stretched to the end when table width is set to 100%.
I have a table who's columns contain two inline divs, one displaying an image, and the other display text, side by side. So each td is rectangular with an image on the right and text beside it on the left (on a single line). The problem (which happens in all browsers) is when I shrink the horizontal browser size, rather than keeping the td width fixed and adding a horizontal scroll bar, it is wrapping the text and moving it under the image, hence shrinking the width of the td. How can I get the td widths to stay fixed regardless of the browser width? Oh and in case its affecting it, both divs have relative positioning so that I can slightly adjust their position within the td. Also, I can't fix the width of the td since each column width must slightly vary depending on the text. Thanks
<td>
<div style="display:inline;position:relative;">
<img src="some_image.jpg" />
</div>
<div style="display:inline;position:relative;">
some short text
</div>
</td>
You can add the 'nowrap' attribute to the td:
<td nowrap>
or style it with:
td {white-space:nowrap;}
Basically your problem is right there in the question "How can I get the td widths to stay fixed ... Also, I can't fix the width of the td since ..." :)
Anyways, there are two possible solutions that I can think of.
If you know what maximum width of the table you want to allow, you could wrap it in a div with a fixed width. That way the body of your page won't shrink to less of the width of the wrapping div, and therefore it will not push on your table.
Use javascript to fix the width of the td after the page has loaded. That way it will be fixed to whatever width its contents have expanded it to.
You should be able to get the width from the td from the offsetWidth property.