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/
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).
We are created a table with a large number of columns and rows. And some columns have large length of data. But we want to set the row height of the table should be same. So we created a div with y-scroll and put the large column data into it. Right now we identified some columns have large data and wrapped this cell value with Y-scroll div. But we want to do it dynamically i.e if the content length exceeds the width this warp it with a Div which have scroll. We prefer something in HTML or CSS not in jquery.
below html shows the large data column value wrapped with div y-scroll.
<td class="tagstd" style="text-align: center; vertical-align:top;padding-top:2px;padding-bottom:0px;max-height:40px"> <div class="yscroll">
#Model.IND_APP_PASS_STATUS.RS_TP
</div>
</td>
I'm trying to create a sticky table header, but the problem is, I can't get the widths of the columns to match the widths of the columns in the base table.
The problem seems to be that regardless of the widths I set (or not set) for the individual columns in the table, the actual widths of the columns sometimes differ greatly based on the content within the table.
I've tried a number of solutions, with the most successful thus far being copying the entire table (tbody included) to within a fixed-position div, and then setting the visibility of the tbody part of the table in the fixed-position div to hidden.
By doing so, the column widths are the same, but the problem then is that the tbody of the sticky table, while not visible, covers up the main table, thus making it impossible to register hover states, etc. on the main table.
Does anyone have any advice on how to properly do a sticky table header that will have the proper column widths in all cases? Thank you.
Edit: Here's an example of my markup:
<div class="sticky">
</div>
<table>
<thead>
<!-- Headers here. -->
</thead>
<tbody>
<!-- Tons of sensitive data here, so can't display. -->
</tbody>
</table>
I apologize for the vagueness, but I can't display the actual data, as it's sensitive in nature. The point is, the data is quite varied, and no matter what I do, I can never get the column widths to be fixed/consistent; they constantly differ.
Currently, upon page render, I copy the entire table to within the sticky div, and then set the visibility of the tbody element to hidden. This gives the proper widths, but causes the main table to be covered. Z-indexing seems to be of no assistance in this case as well.
I found an answer to my question:
Fixed Table Cell Width
The key was to use the col tag with a class for setting the width. Works like a charm now.
My table is put inside div style = "overflow:auto" but I want the first column to stay on its place while all other columns scrollling.
add style="position:fixed;top:100px;left:50px" to the row you would like to fix (you can adapt the px values).
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.