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).
Related
I'm working on a HTML table where you can insert the desired quantity for each color of a certain size. I've created the following JSFiddle where you can see the current situation: https://jsfiddle.net/xv02b5c7/43/.
When you resize your screen until the columns are not fitting anymore, the table becomes horizontally scrollable. What I'm trying to achieve is that the size, price and total columns always remaining visible on the right (without the need to scroll to the right) and that only the first column with the quantity input fields become scrollable. That means that some of the color names with their inputs aren't visible until you scroll to the right.
Would this be possible? I don't want to have the first column of each table row individually scrollable, this would be easily possible by setting a maximum width on the first column of each table row.
Alright I got it
The solution is to spit it up into two separate tables and separate divs
<div id="left-side">
<table>
<!-- The Quantity section separated -->
</table>
</div>
<div id="right-side">
<table>
<!-- The Size+Price+Total section separated -->
</table>
</div>
Along with some css. Not going to post the css here now, might edit later.
Fiddle: https://jsfiddle.net/evj0mbdt/5/
I know there are a million similar articles and I have spent hours trying them all to no avail. I want to be have to have three columns and allow each column to take as much space as necessary but the entire container not to exceed a fixed with (say 500 pixels in this example). The left column must flush left and the right flush right at all times. Often the left and/or right column will be empty and the center should use the entire width.
I can certainly accomplish this with a table with fixed layout or divs with fixed sizes, however, I want to be able to dynamically reuse the same containers to display one, two, or three columns of data and use then entire width available. I can absolutely allow for a fixed with on the contents in col 1 and column 3, though it does not seem to help.
Here is an example:
<div style="width:500px;background:#ff0000;max-width:500px;">
<div style="background:#00ff00;float:left;display:table-cell;">
col1
</div>
<div style="background:#ff00ff;float:left;display:table-cell;overflow:hidden;text-overflow:elipsis;white-space:nowrap;">
REALLY LONG DO NOT EXCEED 500 - WIDTH COL 1 AND COL2 SOMEHOW WOULD BE NICE
</div>
<div style="background:#00ffff;display:table-cell;float:right;">
col3
</div>
</div>
Sorry, cannot show the output of the above since it will not allow me to post an image.
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.
See here: http://jsfiddle.net/KDfTN/
I have a table for which one column will sometimes contain extra-long content. Normally I want the table to stay at its natural width (i.e. not filling its container). However, if the natural width would be larger than the container, I want to cut off the extra-long content with an ellipsis. As shown in the link, I've tried what I think is the correct way of doing this, but it doesn't work: The table just keeps growing past the width of its container. Any ideas or suggestions?
Edit: The width of the table's container is not fixed, just as it is in the JSFiddle interface.
Set max-width:300px; on td.long (or whatever width you want)
I'm trying to create a table with each cell having a fixed width but absolute but varying heights. For example in the first column the first row would be 20px, the second 65px, the third 20px. In the second column the first row would be 20px, the second 45px, the third 40px. And in the last column, the first row would be 20px and the second 85px.
All of this works fine if the table cells are empty or large enough for the content. However, if the content is larger than what the cell accommodates, the row will expand vertically whereas I would like the extra content to be hidden.
I've tried using
overflow:hidden
for the <tr>, <td>, and doing the same while placing the content within a <div> but none appear to achieve what I'm looking for. Any ideas on how I can constrain the row height to an absolute value with any extra content hidden rather than expanding the row? I'd prefer to keep it within a table, but if it's not possible and I need to use another display technique I'm open to the idea.
When using the div solution, have you tried setting a height for the div itself while giving it an overflow: hidden style?