html " title=学习>学习使用html 中table实现内容滚动下拉表头和左右滑动前四列固定不动的方法代码整理
html"><! DOCTYPE html > < html > < head> < metacharset = " utf-8" > < title> </ title> < style> table { border-collapse : collapse; } .sticky-table { overflow : auto; height : 400px; width : 1000px; position : absolute} .sticky-table td, .sticky-table th { border : 1px solid #c7d8ee; width : 150px; min-width : 150px; height : 30px; padding : 5px; outline-color : #c7d8ee; outline-style : solid; outline-width : 1px; } .sticky-table th { position : sticky; top : 0; background-color : #eaf4ff; } .sticky-table td:first-child, .sticky-table th:first-child { position : sticky; left : 0; z-index : 1; background-color : #eaf4ff; } .sticky-table th:first-child { z-index : 2; } .sticky-table td:nth-child(2) { position : sticky; left : 151px; z-index : 3; background-color : #eaf4ff; color : #22222; } .sticky-table th:nth-child(2) { position : sticky; left : 151px; z-index : 4; } .sticky-table td:nth-child(3) { position : sticky; left : 301px; z-index : 3; background-color : #eaf4ff; color : #22222; } .sticky-table th:nth-child(3) { position : sticky; left : 301px; z-index : 4; } .sticky-table td:nth-child(4) { position : sticky; left : 451px; z-index : 3; background-color : #eaf4ff; color : #22222; } .sticky-table th:nth-child(4) { position : sticky; left : 451px; z-index : 4; } .sticky-table th > div { width : 100%; white-space : normal; word-wrap : break-word; word-break : break-all; } </ style> </ head> < bodystyle = " padding : 0px; margin : 0px; " > < divclass = " sticky-table" > < table> < thead> < tr> < th> </ th> < thcolspan = " 8" > </ th> < thcolspan = " 4" > </ th> < thcolspan = " 8" > </ th> </ tr> < tr> < th> </ th> < thcolspan = " 2" > </ th> < thcolspan = " 2" > </ th> < thcolspan = " 2" > </ th> < thcolspan = " 2" > </ th> < thcolspan = " 2" > </ th> < thcolspan = " 2" > </ th> < thcolspan = " 6" > </ th> < thcolspan = " 2" > </ th> </ tr> < tr> < th> </ th> < th> < div> </ div> </ th> < th> < div> </ div> </ th> < th> < div> </ div> </ th> < th> < div> </ div> </ th> < th> < div> </ div> </ th> < th> < div> </ div> </ th> < th> < div> </ div> </ th> < th> < div> </ div> </ th> < th> < div> </ div> </ th> < th> < div> </ div> </ th> < th> < div> </ div> </ th> < th> < div> </ div> </ th> < th> < div> </ div> </ th> < th> < div> </ div> </ th> < th> < div> </ div> </ th> < th> < div> </ div> </ th> < th> < div> </ div> </ th> < th> < div> </ div> </ th> < th> < div> html " title=学习>学习</ div> </ th> < th> < div> </ div> </ th> </ tr> </ thead> < tbody> < tr> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> </ tbody> </ table> </ div> </ body> </ html > 
