[{"data":1,"prerenderedAt":154},["ShallowReactive",2],{"blog-\u002Fblog\u002Ffix_table_header_using_css_position_sticky":3},{"id":4,"title":5,"body":6,"category":138,"cover":139,"csdn":139,"date":140,"description":141,"draft":142,"extension":143,"meta":144,"navigation":145,"path":146,"seo":147,"stem":148,"tags":149,"updated":139,"__hash__":153},"blog\u002Fblog\u002Ffix_table_header_using_css_position_sticky.md","使用 CSS position: sticky 固定表格表头",{"type":7,"value":8,"toc":133},"minimark",[9,14,22,26,110,114,120,126,129],[10,11,13],"h2",{"id":12},"_1-html","1. HTML",[15,16,17],"p",{},[18,19],"img",{"alt":20,"src":21},"HTML 表格结构示例","https:\u002F\u002Fpub-5ec96507162a4f0a8e713a916117c9f4.r2.dev\u002Fblog\u002Fd022dc9d6d644fc1806af289d98b760e.png",[10,23,25],{"id":24},"_2-css","2. CSS",[27,28,33],"pre",{"className":29,"code":30,"language":31,"meta":32,"style":32},"language-css shiki shiki-themes github-dark","th {\n  position: sticky;\n  top: 0;\n  background-color: #000;\n  color: #fff;\n}\n","css","",[34,35,36,49,65,78,91,104],"code",{"__ignoreMap":32},[37,38,41,45],"span",{"class":39,"line":40},"line",1,[37,42,44],{"class":43},"s4JwU","th",[37,46,48],{"class":47},"s95oV"," {\n",[37,50,52,56,59,62],{"class":39,"line":51},2,[37,53,55],{"class":54},"sDLfK","  position",[37,57,58],{"class":47},": ",[37,60,61],{"class":54},"sticky",[37,63,64],{"class":47},";\n",[37,66,68,71,73,76],{"class":39,"line":67},3,[37,69,70],{"class":54},"  top",[37,72,58],{"class":47},[37,74,75],{"class":54},"0",[37,77,64],{"class":47},[37,79,81,84,86,89],{"class":39,"line":80},4,[37,82,83],{"class":54},"  background-color",[37,85,58],{"class":47},[37,87,88],{"class":54},"#000",[37,90,64],{"class":47},[37,92,94,97,99,102],{"class":39,"line":93},5,[37,95,96],{"class":54},"  color",[37,98,58],{"class":47},[37,100,101],{"class":54},"#fff",[37,103,64],{"class":47},[37,105,107],{"class":39,"line":106},6,[37,108,109],{"class":47},"}\n",[10,111,113],{"id":112},"_3-效果图","3. 效果图",[15,115,116],{},[18,117],{"alt":118,"src":119},"固定表头效果图","https:\u002F\u002Fpub-5ec96507162a4f0a8e713a916117c9f4.r2.dev\u002Fblog\u002F11b69b312b170e784d2eebe37be96451.png",[15,121,122],{},[18,123],{"alt":124,"src":125},"滚动时表头固定效果图","https:\u002F\u002Fpub-5ec96507162a4f0a8e713a916117c9f4.r2.dev\u002Fblog\u002F4bca91f7da9eaa837dab087ef23e9cf1.png",[15,127,128],{},"效果就是这样了，我觉得还可以用这个属性做导航栏。",[130,131,132],"style",{},"html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":32,"searchDepth":51,"depth":51,"links":134},[135,136,137],{"id":12,"depth":51,"text":13},{"id":24,"depth":51,"text":25},{"id":112,"depth":51,"text":113},"前端",null,"2019-12-14","记录用 CSS position: sticky 固定 table 表头的实现方式。",false,"md",{},true,"\u002Fblog\u002Ffix_table_header_using_css_position_sticky",{"title":5,"description":141},"blog\u002Ffix_table_header_using_css_position_sticky",[150,151,152],"CSS","Table","position sticky","tx86VNiZaeFxSehXO2U6L-ep2QPpDRyHxUsmwxOxF8Q",1780076049018]