Home › Forums › CSS › Stylized html table with vertical scroll inside tbody › Reply To: Stylized html table with vertical scroll inside tbody
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%