I have a table with 3 rows, and a fixed height of 500px.
The first row can vary in height in order to accommodate it's content, which varies in length.
The third row never changes and always has the same height, which fits its content.
The second row has a bunch of content which will exceed the cell height, and should be hidden after it exceeds the height of the cell. The height of this row should be based purely on how much the first row takes up.
So to be clear on the height:
Row 1 = x (dynamic)
Row 3 = y (static)
Row 2 = 500 - x - y
I have found a way to do this in Firefox, but it does not work in IE 8. For now I am using javascript to fix it after the fact, but it would be nice if this could be done purely with CSS/HTML.
Here is a basic rendition of how I have it working now.
<table cellpadding="0" cellspacing="0" id="table">
<tr><td id="row1">Row 1 Content</td></tr>
<tr><td id="row2"><div>Row 2 Content. Lots more content here should not cause the table to expand.</div></td></tr>
<tr><td id="row3">Row 3 Content</td></tr>
</table>
#table{height:500px;width:200px;}
#row1,#row3{height:1%}
/* ^^ force cell heights to fix content */
#row2{position:relative;height:99%}
/* ^^ a height must be specified to get the absolutely positioned div to assume the cell's height */
#row2 div{position:absolute;height:100%;width:200px;overflow:hidden;top:0;left:0;}
/* ^^ allows content to overflow the cell without causing the cell to expand */
Unfortunately this does not work in IE. IE will take row 2's 99% height and cause the cell to be as tall as the table's set width (500px), even though this causes the table to be much larger than 500%. I would leave the height style off the row, but then the div inside it doesn't know what height to be.
Currently I use jQuery to set the height of the middle row, based on the height of the other cells, but that is not optimal.
Ideas?
Thanks
Why not use three divs with each floats left or right altogether (maybe you want set margins), where in first uoy leave 'height' css alone, in third set fixed height.
But i dont understand 'Row 2 = 500 - x - y' wchich means that if 1 exceeds 500 height it will be negative height. That should satisfy Chrome,FF, Opera and IE8.
I solved this by not using 3 rows, but instead 2 rows. The first row being dynamic, the second row taking up the remaining space, but then splitting the additional content off into a div, which is attached to the bottom of the cell. The extra content would just flow under the div.
Related
I have this problem at hand:
I have table with two columns. I want the left column to:
Define height of the whole table
AND at the same time have min-height of 300px
The second column will have much more lines than the left column but it will neither overflow nor expand the whole table (as the height of the table should be defined by left column and right column must never expand the height of the column).
So basically if first columns content is small (let's say two lines) the height of the table will be 300px and the right columns content will have scrollbar as its contents height is over 300px.
Now next time you load the same page the first column will have more lines, so that their height is over 300px. The table's height will now get bigger so that it is as big as the content of the left column (and therefore left column will never have scrollbar) and right column will again be of appropriate size (same as left column) but again its content will get trimmed and the column will have scrollbar to view the rest of right column.
Could please anyone help me or point me in right direction? I've already spent two hours Googling and trying stuff but I just can't get it working. Also it doesn't have to be achieved with table only. Just divs are also fine. I only need two blocks of text next to each other, 100% width of parent div and height set by left column (while not being less than 300px).
Here's a working example (adjust to your needs) https://jsfiddle.net/aymckoLt/22/
My solution uses a table and divs in the 2 columns:
<table border=1>
<tr>
<td>
<div> <!-- actually this div is unnecessary -->
<!-- add some of lines -->
</div>
</td>
<td style="height:300px">
<div style="height: 100%;overflow-y: auto;">
<!-- add a bunch of lines -->
</div>
</td>
</tr>
</table>
Hope it meets your requirements.
Late edit
Trying to explain what happens ...
Setting the height "fixed" on the right column plays the role of "min-height" when the content of the left column it would be less then that height and at the same time gives a "boundary box" for the 100% of the div with the overflow.
When the content of the left column, which has no boundaries/limits, it occupies more than that height it makes the cell (td) expand and with it it expands the cell on the right column also (kind of overriding the height specified) and most importantly it's taken in account by the height 100% of the div
Or to put it simpler ... it's the "magic" of table(s).
I have a 3 column div layout and the 3 columns look fine. I'm listing items in each column however i'm having to set a min height for the blocks in each column and if the min height isn't big enough then on the next 'row' there is just a space.
However by setting a min height it means that there is a huge gap below the top row item if it's not as tall.
Is there anyway around this?
Site is here - https://steve-morris.co.uk/properties/rent
Each block has a gap below it and when the block isn't tall there is a bigger gap. I'm wondering how I set it so that instead of using a min height, the next row auto adjusts to the height of the tallest block in that row.
You could set .prop-list-title {min-height:290px}. It looks like the title is the only area where the text wraps. Because it's responsive you would want to make sure you set that rule in the proper media display in your css.
You can use some JS to determine the height of the largest box of the row and add a uniform height to all elements within the row.
Have a look at this: http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html
I have a question.
I am testing out a table. This will eventually be with ASP.net but for now I'm just using JSFiddle to get the styling and everything done.
But I came across something inexplicable (at least for me).
Here is my fiddle
So I am setting the widths of my columns, and I am equaling 100%:
<table id="UndergradTable">
<col style="width:20%"/>
<col style="width:60%"/>
<col style="width:20%"/>
<thread>
....
</table>
If I change the numbers to 22, 56, and 22, (which also add up to 100%), the whole table actually shrinks in size instead of just the middle section.
Is there a reason why this should happen?
When a table is width: auto, each cell is as narrow as possible while still being wide enough to:
support the width constraints in the CSS
hold all the content of the cell
not cause the table to horizontally overflow its container
The text in the right most column is the widest. When you make the relative width of the first two cells smaller in comparison to the right most, the entire table shrinks while the right most cell stays the same size.
Because of 3. column text: "Sergeant McAngryFace"
This text from 2 line want to 1 line with change from 20 60 20 to 22 56 22.
Or use without space for non breaking space and all will 1 lines
Try to change:
"Sergeant McAngryFace" to
"Sergeant McAngryFace"
Unless there's a reason you don't want to, why not set the table width to 100%? Such as:
<table id="UndergradTable" style="width:100%">
JSFiddle
This I can't figure out despite my best effort.
I got a table that has 4 cells;
the the first cell is longest, has a fixed width and a 2 row span.
The 2nd cell is supposed to have a fixed height.
The contents of the 3rd cell are going to change often so I have no idea what the height is going to be,
and the 4th cell has a col span of two.
It looks perfect in Firefox as it seems to let me set the cell height, but it looks poor in IE
as it's completely ignoring it and for some reason, instead of making cell 2 the fixed height or even the height of the content, it uses all the space the 3rd cell isn't using which makes the header look way bigger than it should when the content in the 3rd cell isn't big enough.
This only seems to happen in IE; I tested both Chrome and FireFox and they both do it like I want.
I'm using IE 9 the rest of the page works too; just this one annoying format issue.
My site: http://gallery.pawworks.net.
I'm trying to make a template for the rest of the site pages and the page content goes in the 3rd cell so thus why the template will not know the size.
As for what I tried in the cell that should have the fixed height:
<td height="60" style="height:60px;max-height:60px;">
Edit: putting the Doctype tag in didn't help. what I've ended up doing is added a div tag to the cell that is the height I want and another to the cell that should be but isn't.
Used JavaScript to get the height of the one that is sized correctly, and the height of the other. If the height of the other is larger than the height of the first do nothing otherwise set the height of the second to match the first. That way if the content cell gets bigger than the nav cell it can expand, but if not it'll pad the extra space out so that IE keeps the cell at the correct min size which prevents the header cell from exceeding the max size which is what I was after (and can just outright set in every other browser I've tried).
I have a table with 1 row and 5 columns. I have fixed the width of those 5 columns to certain known values (150px, 200px etc..). I have also set the left-margin for each one.
I want the table to widen and occupy the entire width of its parent. So, I set its width to 100%. When the table is wider than the combined width and margins of the 5 columns, it causes them to spread out across the table leaving gaps in between.
But, I want those 5 columns to stay on the left.
To achieve this, I added a 6th column and set its width to auto, hoping that it will properly push the first 5 to the left and occupy the remaining space. It works in Firefox and Chrome. But it doesn't work in IE. In IE, the 5 columns still space themselves evenly across the table.
I tried setting the width of the 6th column to 100% instead of auto. But the problem is, it is wiping out the left-margins of the 5 columns! Sort of like, the 100% column is pushing the 5 columns too much to the left that their margins have disappeared!
I want the padding, margin and width of the first 5 columns to be maintained, but pushed to the left, yet the table should expand as wide as its parent.
The table has a background image that needs to show up beyond the 5 columns.
Some might suggest that I move the background to the table's parent, but I can't - take my word for it :D
How can I get this to work in Firefox, Chrome and IE?
Thanks.
Here is the link : http://test.greedge.com/table/table.php. Try it in FF and IE
Edit: The solution is simple: Add a to the one td in the table in the last column.
The table cell of the inlying table is not rendered, because it contains nothing. Thus, the last cell also contains nothing, does not get rendered, and the other cells have to split the available space amongst them.
I don't know which browser is doing the right thing here, all IE's (including 8) don't render the column, all other browsers do.
Old answer:
Columns aren't supposed to have margins according to the CSS 2.1 spec:
margin-right, margin-left
Applies to: all elements except elements with table display types other than table-caption, table and inline-table
You will need to use padding within the cells.
An auto column should work in any browser in the scenario you describe (just don't specify any width). Can you post an online example of a table that doesn't work?