{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 smile是对你的礼貌 的问题《<table> with fixed <thead> and scrollable <tbody>》','https://www.manongdao.com/q-1178095.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I've looked through questions here and articles all over the internet, but haven't found yet solution that would satisfy my requirements. So now in 2017, is there an elegant way to have a <table> that would:
- be written in html+css (no js)
- have fixed header (not scrollable; not sticky)
- have scrollable
<tbody>(scrollbar may be always visible) - header and body would handle resizing properly and not mess alignment of the
<thead>columns and the<tbody>columns - would not use nested tables or separate table for header
Short Answer: No, not possible.
VXp's answer is interesting but doesn't work as you might expect. It has 2 issues:
Same thing for Jon's answer.
I discourage using fixed table head, but if you really want to do this with the set of rules you enumerated (the 5 rules you mentioned), the only solution is using js/jQuery.
How about this?
I've created a fiddle below
https://jsfiddle.net/jchaplin2/dt829611/1/
This solution fulfills all 5 requirements:
Chrome, FF, Edge
the simplest solution is to use
th { position: sticky; top: 0; }IE11
To sloppily support IE11 (2.5% market share as of 10/2018), a bit jaggy but at least
THs are on top - you could add this JavaScript:which will (since IE ignores
stickyposition) usetransform translateYto position the TH elements.PS: the above JS (without the wrapping
ifstatement) works pretty decently for all other evergreen browsers too - in caseposition: sticky;does not fits your needs...