is it possible to set the scroll on a table and not its container ?
hi all,
https://jsfiddle.net/n0x8e5L6/
in this example, i have a container with a table & a button. my button is hidden since my table is too long. is it possible to set a scroll on the table so my button is always visible ? i don't want to add an other container just for the table...
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
21 Replies
why dont you try setting
thead { position: sticky; top: <height of the header>; } on that table?
this way, the <thead> is stuck at the top of the page, even when the table is scrolled off screen
otherwise, use grid to make the middle section scrollable
this has the huge disadvantage of obliterating border collapsingi didn't understand what you meant 🤔
when you put borders on the table, the borders collapse into a single border
instead of being 2 borders completely separated
ah ok
for example:
td { border: 1px solid red; }
without border collapse, you would see 1px on the left and right side, then 2px between each cell
that looks fugly af
but honestly, the sticky option might be the best
if you have a <tfooter> you can put it at the bottomadding the position sticky doens't change anything... did i miss something ?
yes
you need to have top
without top, it doesnt work
my bad... wrote too fast : position sticky + top doesn't change anything...
also, the table has to scroll off of the screen
adding sticky + top only "pushes" the table down
sorta
but you can put the button on the thead
and this way, its always visible
or you can put the button on a tfooter
and it will always be visible
aaaah i got it... i didn't touch the table, but added the sicky bottom to the button
solves the problem !
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
it does, but ... it's not the best
this is what i wanted \o/
but doesnt always work
but, if you are happy with it, you can keep how it is
it's not wrong
it is for a desktop app. i don't need to test littles screens
i even tested 150px, but in reality, it's bigger
150px height is probably enough
but hey, if you are happy with how it is, keep it like that
it isnt wrong or bad
👍 ok
thanks for the help
you're welcome