HTML Table overflow-y scrolling with fixed y axis headings - javascript

I have a table with headers for both the x and y axes, and want the table to scroll when it overflows on the y axis while retaining the header.
Using display: block; overflow-y: auto; in the <table> element gives me some scrolling, but I lose the y axis labels.
Here's a simple pen work-in-progress: https://codepen.io/Malgalin/pen/wNZRPz?editors=0100
I have also tried versions of making the th[scope='row'] elements have a fixed position, which sort of works, but it creates messy over-lapping headers and makes the initial blank top left corner cell disappear.
I'm happy to see answers using JS or jQuery if necessary.

You can use the sticky position for your headers. You need to change your HTML a little bit, you need a wrapper for the table.
<div id='table_wrapper'>
<table> .... </table>
</div>
Now you can set the TH elements to position: sticky and, for the thead, make it stick at top: 0px, for the tbody use left: 0px.
Using just that won't work on your actual code since you have some errors though. So, first close the thead tag and open a tbody tag properly (now you open the thead and close a tbody). The second thing you need to fix is to remove those display: block on the table elements, when you do that you break the table.
Check this edited codepen link https://codepen.io/anon/pen/daLrGZ?editors=1100
Note that you'll need to add some background to the th's.
EDIT: if you want the top left TH to stay over the rest THs add this:
table thead tr th:first-child {
left: 0px; //so it also sticks to the left
z-index: 2; //so it's over the rest
}

Maybe what you are looking is already solved, have a look and let me know:
https://stackoverflow.com/a/50649696/5796090
In the link above you can find a scrollable table with a fixed header using CSS Grid.
Basically you define 2 areas in your grid for thead and tbody and set an overflow for the second one.
table {
display: inline-grid;
grid-template-areas:
"head-fixed"
"body-scrollable";
}
thead {
grid-area: head-fixed;
}
tbody {
grid-area: body-scrollable;
overflow: auto;
height: 400px; /* define height depending on your needs */
}
Hope this help :)

Related

How to make cells automatcially go to a new row

I have a table that is 650px wide and I add words to this table...each word is in its own cell.
However if I have too many words then it expands the table.
What I want to do is allow it to limit the X and auto go to a new row or under the current content so it doesn't resize the table.
I thought about calculating the width of each cell using JS..but it says each is 0px as the cells are created programmatically using JS.
Perhaps a table is not the best solution for you, since it doesn't have this functionality.
You could try simple <div>'s, they will wrap, but you could also have a look at the newer, and more advanced, Flexbox. Have a look at the Wrapping section on that page.
I got it work by using
#tGrammar {
display: block;
}
#tGrammar td {
display: inline-block;
}
in CSS
and in JS where is tChoicesMain is table
tChoicesMain.style.tableLayout = "fixed";
tChoicesMain.style.maxWidth = "650px";
tChoicesMain.setAttribute("id", "tGrammar");

Horizontal scrollbar does not show when content in the table cell overflows

I am working with dgrid tables. I have a table with single column, and each column cell have some contents within it. When my cell content is really big, i would like to show a scrollbar, so the user can scroll and view the rest of the content. However in my table, the scrollbar does not show in this case, but if i use the dgrid columnResizer to expand the column, then the scrollbar shows up till the expanding width. If the width is less than the content, then the rest of the content will still remain invisible. Here is the jsFiddle.
http://jsfiddle.net/vrwe7dn5/
This is my CSS-
#grid{
width: 20%;
height: auto;
}
.dgrid-scroller{
overflow:auto;
position: relative;
}
.dgrid-content{
white-space: nowrap;
}
Please let me know if i am doing anything wrong.
The class you are using, .dgrid-scroller{} is only for the column. To make the content scrollable, you would have to apply overflow-x:scroll on the td's themselves.

What prevents .row div from scrolling?

I would like to scroll each row horizontally. So on right arrow keypress normally the whole row should scroll to the left. In fact it was scrolling, before I added display: table in order to get the real width of row.
How to scroll .row?
Example, to show problem(need resize client area to show 2 cells):
https://jsfiddle.net/souren/98rddfzp/8/
Instead of using display: table, try using box-sizing: border-box.
Check this and this.
Here's your updated fiddle.

Tbody vertical scrollbar WITHOUT fix width

Exactly like the title says. There are hundreds of posts around with this question and all answers are forcing me to use fix width, but that's not the real world.
I want my td to use % and still have tbody scrollable.
I want what Isaac Betesh asked in a comment on an answer to this question "How to apply vertical scrollbar for TBODY":
This example has exact pixel width for each td and th. Is there a way to use % widths instead of px and accomplish the same?
Edit:
Don't want to include dozens of examples, because they're all over Stack Overflow, but this is the classic one: JSFiddle.
If you just change the content in thead like this: JSFiddle, it all gets out of sync between thead and tbody.
The solution
display:block;
doesn't work.
scrollbar that added to tbody is the problem,I set thead width to width: calc(100% - 17px) and some other css and problem solved,
this is a working example
and this is what I've added to your css :
thead, tbody, tr, td { display: block}
thead {
width: calc(100% - 17px);
}
tbody td, thead td {
width: 40%;
display:inline-block
}
table {
background-color: #aaa;
width:50%
}

JavaScript/jQuery determine the length of a text "in advance"

I'm developing a web app with jQuery. I have a table with fixed-width columns, and javascript populated row contents.
Problem: One column has a width of 140px. Most of the sentences in this column are short and fit into this width. The font is NOT monospaced. There are a few long sentences, and there the td's have 2 lines and the height of
the row becomes greater than 20px.
I do not want this to happen, so I have to shorten the long sentences
My first idea was to fill the td with the value and shortly after that to check the height of the td or row. And when the height is larger then 20px I have to shorten the sentence.
But I think this would cause the table rows to "flicker" when the rows get the values.
So the other idea is to make a invisible div or span and to do the same thing described as before.
Is there somebody who did this before and found a good solution for my problem?
There's no way to calculate what the size of the text will be - or at least there's no portable way. You won't even be able to know for sure which font will be used.
What you might do instead is use CSS to force the td to a fixed size and ignore all overflowing text. overflow: hidden should get you going. Might also want to use white-space: nowrap as well.
You could just prevent the resizing with CSS:
table { table-layout:fixed; }
table td, table th { white-space:nowrap; overflow:none; }
What about setting the height of the cell and then using text-overflow: ellipsis?
table td { text-overflow: ellipsis; max-height: 20px; }
EDIT: fixed the fiddle - Here's an example:
JSFiddle - td and ellipsis

Categories

Resources