{"id":248,"date":"2020-09-25T02:14:23","date_gmt":"2020-09-25T02:14:23","guid":{"rendered":"http:\/\/basicwebsitesolutions.com\/blog\/?p=248"},"modified":"2020-09-25T02:14:23","modified_gmt":"2020-09-25T02:14:23","slug":"sb-admin-php-fixed-table-header-with-scrollable-body","status":"publish","type":"post","link":"https:\/\/basicwebsitesolutions.com\/blog\/2020\/09\/25\/sb-admin-php-fixed-table-header-with-scrollable-body\/","title":{"rendered":"SB Admin PHP – Fixed Table Header with Scrollable Body"},"content":{"rendered":"\n

Hi guys,<\/p>\n\n\n\n

This question was raised to me recently and it peeked my interest to solve and find out how to do this. After digging around i found 2 working codes for my case. <\/p>\n\n\n\n

To explain further my tables are generated dynamically so the column widths and gaps differ by each refresh of the table<\/p>\n\n\n\n

There are the 2 options that i found<\/p>\n\n\n\n

\"\"
\/\/\/\/\/\/\/\/\/\/\/\/\/\/ OPTION 1 \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
table tbody { display:block; max-height:450px; overflow-y:scroll; }
table thead, table tbody tr { display:table; width:100%; table-layout:fixed; }

table width=”100%” class=”table table-striped table-hover” id=”dataTables-example”
<\/figcaption><\/figure>\n\n\n\n
\"\"
\/\/\/\/\/\/\/\/\/\/\/\/\/\/ OPTION 2 \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
table {
overflow-y: auto;
height: 10vh;
}
thead th {
position: sticky;
top: 0;
}

table width=”100%” class=”table table-striped table-hover” id=”dataTables-example”<\/figcaption><\/figure>\n\n\n\n

Hope this code helps out somebody out there. If you have any questions, just drop me a line.<\/p>\n\n\n\n

Coffee Cup<\/p>\n","protected":false},"excerpt":{"rendered":"

Hi guys, This question was raised to me recently and it peeked my interest to solve and find out how to do this. After digging around i found 2 working codes for my case. To explain further my tables are generated dynamically so the column widths and gaps differ by each refresh of the table … <\/p>\n

Continue reading “SB Admin PHP – Fixed Table Header with Scrollable Body”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,11],"tags":[147,145,144,146],"class_list":["post-248","post","type-post","status-publish","format-standard","hentry","category-life-as-a-programmer","category-php-and-mysql","tag-css-code","tag-fixed-table-header","tag-sb-admin","tag-scrollable-body"],"_links":{"self":[{"href":"https:\/\/basicwebsitesolutions.com\/blog\/wp-json\/wp\/v2\/posts\/248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/basicwebsitesolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/basicwebsitesolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/basicwebsitesolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/basicwebsitesolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=248"}],"version-history":[{"count":2,"href":"https:\/\/basicwebsitesolutions.com\/blog\/wp-json\/wp\/v2\/posts\/248\/revisions"}],"predecessor-version":[{"id":252,"href":"https:\/\/basicwebsitesolutions.com\/blog\/wp-json\/wp\/v2\/posts\/248\/revisions\/252"}],"wp:attachment":[{"href":"https:\/\/basicwebsitesolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/basicwebsitesolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/basicwebsitesolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}