当一个表格展示的数据相当多的时候，经常会用到固定列，固定行的事情
原理 是 两个或者多个表格组合行程 固定行或者固定列的情况 ，为了保障样式的统一性
当固定行的时候，要限定宽
当固定列的时候，要限定高
运用的插件 fixed-table.js 以及相关css
例子：
html部分：
<div class="table-scrollable" style="border: 0; overflow: hidden; font-size: 11px;"> <p class="t" style="font-size: 18px;font-weight: bolder;color: #666666;margin: 15px 0 25px"> 待分配人员 </p> <div class="person-box"> <div class="fixed-table-box row-col-fixed layui-form " id="table"> <!-- 表头 start --> <div class="fixed-table_header-wraper"> <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0"> <thead> <tr> <th class="w-80" data-fixed="true"><div class="table-cell">ID</div></th> <th class="w-150"><div class="table-cell">邀请单位</div></th> <th class="w-100"><div class="table-cell">嘉宾类别</div></th> <th class="w-120"><div class="table-cell">嘉宾分类</div></th> <th class="w-150"><div class="table-cell">证件上全名</div></th> <th class="w-80"><div class="table-cell">性别</div></th> <th class="w-150"><div class="table-cell">单位</div></th> <th class="w-110" data-fixed="true" data-direction="right"><div class="table-cell">单人入住</div></th> <th class="w-110" data-fixed data-direction="right"><div class="table-cell">双人入住</div></th> </tr> </thead> </table> </div> <!-- 表头 end --> <!-- 表格内容 start --> <div class="fixed-table_body-wraper"> <table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td class="w-80" data-fixed="true"><div class="table-cell">1</div></td> <td class="w-150"><div class="table-cell">邀请单位</div></td> <td class="w-100"><div class="table-cell">嘉宾类别</div></td> <td class="w-120"><div class="table-cell">嘉宾分类</div></td> <td class="w-150"><div class="table-cell">证件上全名</div></td> <td class="w-80"><div class="table-cell">性别</div></td> <td class="w-150"><div class="table-cell">单位</div></td> <td class="w-110" data-fixed="true" data-direction="right"></td> <td class="w-110" data-fixed data-direction="right"></td> </tr> <tr> <td class="w-80" data-fixed="true"><div class="table-cell">1</div></td> <td class="w-150"><div class="table-cell">邀请单位</div></td> <td class="w-100"><div class="table-cell">嘉宾类别</div></td> <td class="w-120"><div class="table-cell">嘉宾分类</div></td> <td class="w-150"><div class="table-cell">证件上全名</div></td> <td class="w-80"><div class="table-cell">性别</div></td> <td class="w-150"><div class="table-cell">单位</div></td> <td class="w-110" data-fixed="true" data-direction="right"></td> <td class="w-110" data-fixed data-direction="right"></td> </tr> <tr> <td class="w-80" data-fixed="true"><div class="table-cell">1</div></td> <td class="w-150"><div class="table-cell">邀请单位</div></td> <td class="w-100"><div class="table-cell">嘉宾类别</div></td> <td class="w-120"><div class="table-cell">嘉宾分类</div></td> <td class="w-150"><div class="table-cell">证件上全名</div></td> <td class="w-80"><div class="table-cell">性别</div></td> <td class="w-150"><div class="table-cell">单位</div></td> <td class="w-110" data-fixed="true" data-direction="right"></td> <td class="w-110" data-fixed data-direction="right"></td> </tr> <tr> <td class="w-80" data-fixed="true"><div class="table-cell">1</div></td> <td class="w-150"><div class="table-cell">邀请单位</div></td> <td class="w-100"><div class="table-cell">嘉宾类别</div></td> <td class="w-120"><div class="table-cell">嘉宾分类</div></td> <td class="w-150"><div class="table-cell">证件上全名</div></td> <td class="w-80"><div class="table-cell">性别</div></td> <td class="w-150"><div class="table-cell">单位</div></td> <td class="w-110" data-fixed="true" data-direction="right"></td> <td class="w-110" data-fixed data-direction="right"></td> </tr> <tr> <td class="w-80" data-fixed="true"><div class="table-cell">1</div></td> <td class="w-150"><div class="table-cell">邀请单位</div></td> <td class="w-100"><div class="table-cell">嘉宾类别</div></td> <td class="w-120"><div class="table-cell">嘉宾分类</div></td> <td class="w-150"><div class="table-cell">证件上全名</div></td> <td class="w-80"><div class="table-cell">性别</div></td> <td class="w-150"><div class="table-cell">单位</div></td> <td class="w-110" data-fixed="true" data-direction="right"></td> <td class="w-110" data-fixed data-direction="right"></td> </tr> <tr> <td class="w-80" data-fixed="true"><div class="table-cell">1</div></td> <td class="w-150"><div class="table-cell">邀请单位</div></td> <td class="w-100"><div class="table-cell">嘉宾类别</div></td> <td class="w-120"><div class="table-cell">嘉宾分类</div></td> <td class="w-150"><div class="table-cell">证件上全名</div></td> <td class="w-80"><div class="table-cell">性别</div></td> <td class="w-150"><div class="table-cell">单位</div></td> <td class="w-110" data-fixed="true" data-direction="right"></td> <td class="w-110" data-fixed data-direction="right"></td> </tr> <tr> <td class="w-80" data-fixed="true"><div class="table-cell">1</div></td> <td class="w-150"><div class="table-cell">邀请单位</div></td> <td class="w-100"><div class="table-cell">嘉宾类别</div></td> <td class="w-120"><div class="table-cell">嘉宾分类</div></td> <td class="w-150"><div class="table-cell">证件上全名</div></td> <td class="w-80"><div class="table-cell">性别</div></td> <td class="w-150"><div class="table-cell">单位</div></td> <td class="w-110" data-fixed="true" data-direction="right"></td> <td class="w-110" data-fixed data-direction="right"></td> </tr> <tr> <td class="w-80" data-fixed="true"><div class="table-cell">1</div></td> <td class="w-150"><div class="table-cell">邀请单位</div></td> <td class="w-100"><div class="table-cell">嘉宾类别</div></td> <td class="w-120"><div class="table-cell">嘉宾分类</div></td> <td class="w-150"><div class="table-cell">证件上全名</div></td> <td class="w-80"><div class="table-cell">性别</div></td> <td class="w-150"><div class="table-cell">单位</div></td> <td class="w-110" data-fixed="true" data-direction="right"></td> <td class="w-110" data-fixed data-direction="right"></td> </tr> </tbody> </table> </div> <!-- 表格内容 end --> <!-- 固定列 start --> <div class="fixed-table_fixed fixed-table_fixed-left"> <div class="fixed-table_header-wraper"> <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0"> <thead> <tr> <th class="w-80"><div class="table-cell">ID</div></th> <th class="w-150"><div class="table-cell">邀请单位</div></th> <th class="w-100"><div class="table-cell">嘉宾类别</div></th> </tr> </thead> </table> </div> <div class="fixed-table_body-wraper"> <table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr > <td class="w-80"><div class="table-cell">1</div></td> <td class="w-150"><div class="table-cell"> 中青旅</div></td> <td class="w-100"><div class="table-cell"> VIP</div></td> </tr> <tr > <td class="w-80"><div class="table-cell">1</div></td> <td class="w-150"><div class="table-cell"> 中青旅</div></td> <td class="w-100"><div class="table-cell"> VIP</div></td> </tr> <tr > <td class="w-80"><div class="table-cell">1</div></td> <td class="w-150"><div class="table-cell"> 中青旅</div></td> <td class="w-100"><div class="table-cell"> VIP</div></td> </tr> <tr > <td class="w-80"><div class="table-cell">1</div></td> <td class="w-150"><div class="table-cell"> 中青旅</div></td> <td class="w-100"><div class="table-cell"> VIP</div></td> </tr> <tr > <td class="w-80"><div class="table-cell">1</div></td> <td class="w-150"><div class="table-cell"> 中青旅</div></td> <td class="w-100"><div class="table-cell"> VIP</div></td> </tr> <tr > <td class="w-80"><div class="table-cell">1</div></td> <td class="w-150"><div class="table-cell"> 中青旅</div></td> <td class="w-100"><div class="table-cell"> VIP</div></td> </tr> <tr > <td class="w-80"><div class="table-cell">1</div></td> <td class="w-150"><div class="table-cell"> 中青旅</div></td> <td class="w-100"><div class="table-cell"> VIP</div></td> </tr> <tr > <td class="w-80"><div class="table-cell">1</div></td> <td class="w-150"><div class="table-cell"> 中青旅</div></td> <td class="w-100"><div class="table-cell"> VIP</div></td> </tr> </tbody> </table> </div> </div> <div class="fixed-table_fixed fixed-table_fixed-right"> <div class="fixed-table_header-wraper"> <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0"> <thead> <tr> <th class="w-110"><div class="table-cell"> <input type="checkbox" id="tablesingle" lay-skin="primary" lay-filter="tablesingle">单人入住</div></th> <th class="w-110"><div class="table-cell"> <input type="checkbox" id="tabledouble" lay-skin="primary" lay-filter="tabledouble">双人入住</div></th> </tr> </thead> </table> </div> <div class="fixed-table_body-wraper"> <table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr data-id="1"> <td class="w-110"> <div class="table-cell"> <input type="checkbox" name="tablesingle" lay-skin="primary" lay-filter="singleTrans"> </div> </td> <td class="w-110"> <div class="table-cell"> <input type="checkbox" name="tabledouble" lay-skin="primary" lay-filter="doubleTrans"> </div> </td> </tr> <tr data-id="2"> <td class="w-110"> <div class="table-cell"> <input type="checkbox" name="tablesingle" lay-skin="primary" lay-filter="singleTrans"> </div> </td> <td class="w-110"> <div class="table-cell"> <input type="checkbox" name="tabledouble" lay-skin="primary" lay-filter="doubleTrans"> </div> </td> </tr> <tr data-id="3"> <td class="w-110"> <div class="table-cell"> <input type="checkbox" name="tablesingle" lay-skin="primary" lay-filter="singleTrans"> </div> </td> <td class="w-110"> <div class="table-cell"> <input type="checkbox" name="tabledouble" lay-skin="primary" lay-filter="doubleTrans"> </div> </td> </tr> <tr data-id="4"> <td class="w-110"> <div class="table-cell"> <input type="checkbox" name="tablesingle" lay-skin="primary" lay-filter="singleTrans"> </div> </td> <td class="w-110"> <div class="table-cell"> <input type="checkbox" name="tabledouble" lay-skin="primary" lay-filter="doubleTrans"> </div> </td> </tr> <tr data-id="5"> <td class="w-110"> <div class="table-cell"> <input type="checkbox" name="tablesingle" lay-skin="primary" lay-filter="singleTrans"> </div> </td> <td class="w-110"> <div class="table-cell"> <input type="checkbox" name="tabledouble" lay-skin="primary" lay-filter="doubleTrans"> </div> </td> </tr> <tr data-id="6"> <td class="w-110"> <div class="table-cell"> <input type="checkbox" name="tablesingle" lay-skin="primary" lay-filter="singleTrans"> </div> </td> <td class="w-110"> <div class="table-cell"> <input type="checkbox" name="tabledouble" lay-skin="primary" lay-filter="doubleTrans"> </div> </td> </tr> <tr data-id="7"> <td class="w-110"> <div class="table-cell"> <input type="checkbox" name="tablesingle" lay-skin="primary" lay-filter="singleTrans"> </div> </td> <td class="w-110"> <div class="table-cell"> <input type="checkbox" name="tabledouble" lay-skin="primary" lay-filter="doubleTrans"> </div> </td> </tr> <tr data-id="8"> <td class="w-110"> <div class="table-cell"> <input type="checkbox" name="tablesingle" lay-skin="primary" lay-filter="singleTrans"> </div> </td> <td class="w-110"> <div class="table-cell"> <input type="checkbox" name="tabledouble" lay-skin="primary" lay-filter="doubleTrans"> </div> </td> </tr> </tbody> </table> </div> </div> <!-- 固定列 end --> </div> </div> </div>