Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Stylized html table with vertical scroll inside tbody Reply To: Stylized html table with vertical scroll inside tbody

#192350
trlmkb
Participant

how about this pen:
http://codepen.io/trlmkb/pen/LEbJKw

it’s not perfect and it uses javascript snippet to detect which OS you’re using and adds a class to body class.

I tried it both windows and mac os, and it looks pretty good. the difference is that windows adds a scrollbar of 17px to the tbody what makes it smaller. then thead looks out of shape and doesn’t align properly, so we need to add padding-right: 17px to thead to make it align. then we need to move the background from th to head because of the white corner, we apply the background to the whole thead rather than each th.

the javascript adds a class, which we use to detect mac os and remove the padding-right in thead. like I said mac os adds the scrollbar on top not messing with the width, to no need to make thead align, just keep thead and tbody with width: 100%