I have a table containing many rows. I can allow a change in row height to fill the contents, but I want to keep my cell width fixed. Setting a max-width to cell solves the problem, but the content over flows to the next cell.. Can anybody have a solution in html/css or something else?
In addition to max-width, set overflow: hidden;. See http://jsfiddle.net/andyedinborough/nq7rA/1/
Related
I can't seem to keep my (dynamic width) table on the same line as a previous element and have it extend to it's parent container without exceeding it and overflowing. I don't want a horizontal scrollbar as the table should just break the lines and/or words up to make it more narrow.
However, it's not doing that.
jsfiddle
In the fiddle, the table overflows and extends beyond it's parent container's width. The parent container is using white-space: nowrap to keep it on the same line as the content next to it.
Why is it not sizing it's width correctly?
If I set a fixed width on the table, it works and sizes the width correctly, but I need the width of the table to be dynamic. Only the outermost containing div is fixed.
Any ideas?
If you add
.listInfoTbl {
[...]
max-width: 142px;
[...]
}
then you'll see everything is working. But you may wonder why is that?
The answer is that you set a certain width for your div.listPropertyDiv therefore it won't grow beyond this and additionally there's some padding to take into the formula:
innerWidth(.listPropertyDiv) = innerWidth(#left) - border(.listPropertyDiv) - padding(.listPropertyDiv) - margin(.listPropertyDiv)
innerWidth(.listPropertyDiv) = 397px
Therefore:
width(table.listInfoTbl) <= innerWidth(.listPropertyDiv) - width(img.listImage)
width(table.listInfoTbl) <= 142px
You should overthink having a fixed width on #left, if your thinking about dynamically changing the content's width because if the parent doesn't shrink it's children can't.
A fixed fiddle
But maybe this is what you're looking for a solution with max-width and percentage so objects can shrink accordingly.
I have a code as displayed in here : http://jsfiddle.net/db4XL/
The table-layout:fixed seems to divide the child elements into two 50% width.
Is there any posible way to make the div.number width is auto?
Please look at this image for what I want to achieve :
Thanks
This is not possible. If you want the table cells to resize to the content so the left cell is splitted at approx 30% then you'll have to use percentages. Here's a working jfiddle:
http://jsfiddle.net/db4XL/7/
What you are asking for just isn't possible. The standard behaviour for tables using the auto property on all cells is to divide it equally.
Please note that I am not trying to resolve any specific issue, but trying to understand what's causing this issue.
I have set the width, height and display of some divs, but the height/width settings are not being honored. The text is also being pushed downward.
http://jsfiddle.net/k7esv/
1) Why does it push the text downward when height is set in table-row then BUT when height is removed, it places text at the top?
2) Why are the width/height settings not honored?
3) Why doesn't setting the margin property have any effect on them either?
http://jsfiddle.net/k7esv/1/
1) This seems to be a rendering issue specific to Firefox. Setting the vertical-align property on the divs fixes it. top, middle, or bottom all seem to work. I don't understand myself what FF is doing when there is a height but no vertical-align set; it might be a bug.
2) The width and height are honored, but they are subject to table sizing rules. When a table does not have enough room to give each of the cells the width they have specified, it will give more room to cells that have more content. This is what was happening with your example. If you look at my example below, you will see that when the parent element is wider than the sum total of the table cells' widths, the cells respect the width. The height should always work (except in the case of the FF rendering issue I mentioned above).
3) Table cells don't have margins. Use border-spacing and display:table on a parent div.
http://jsfiddle.net/chad/k7esv/3/
I will just add (seeing as it seems to have been missed) that setting the heights on individual table cells in a table row can be pointless, as all cells in the same table row will become the same height as the tallest cell in said row.
Having said that, heights may want to be added for when dynamic content is served to different cells, meaning their heights fluctuate. It may be that you want to set a particular cell to never be less than height X, which will only come in to effect when another certain cell has less content.
I have a <table> with CSS property of width: auto, which has a variable number of columns. The rightmost column has no width set. In IE8/Firefox3.6.12 the table resizes as desired according to the content width of that column. <table>). In IE7, it fills out to the right border of the containing . By setting the width of that column in CSS, I was able to get it to display with the same width across IE7/IE8/Firefox3.6.12.
I dont know if I understood right your question but, Did you try adding a width:auto; to THAT column in particularly???
What I would probably try If I would be working with tables in IE is to have most of the elements with a defined widht and height. Sometimes when there is no specification the elements doesnt display...
Maybe thats the problem...
If not, please add some code so we can see better your problem.
How do i set the table under the images to be the same width as the image above? Thanks for your help!
http://cran-web.com/letaky/generate/10
EDIT: I was talking about "tab_cena", not "tab_objednavky". Sorry for misunderstanding.
Set the width of your table (#tab_objednavky) to 100%.
Currently your style shows that you have the width of your table set to 160%.
(Nazdar!)
There are only 2 kinds of measurements you can give the table: a fixed width like 1000px, or a percentage like 100%. If you give a fixed width, then you have to know the width of the items above (4 cells, 249px each). If you give a percentage, then it depends on the size of the element that contains your table.
You can use a percentage to your advantage. Since your table is in a 249px cell and you want it to stretch across 4 cells, try setting the width to 400%. It's a little bit of a hack because you're breaking out of the cell container, but it should work.
A better way would be to make the .cell equal 249px x 4 (996px), and just make the #tab_objednavky table inside it 100% width.
Edit: to answer your question based on the title of your post: you can't do that without using JavaScript to set the size of the container div.
Not sure I am fully understanding, but #tab_objednavky style you have width: 160%. Just set that to width: 100% and it will fill the .cell container.
Looking at your layout it looks like the width of the image containers is set by the class .cell_1, so just add it to your table and you should set. (Actually you should replace the existing cell class that is already applied to it.)
Why don't you just place the image as the first row of the table?