1.css部分
table {border-collapse: collapse;border-spacing: 0}h1 {font-size: 20px;color: #fff;text-transform: uppercase;font-weight: 300;text-align: center;margin-bottom: 15px;}table {width: 700px;table-layout: fixed;WORD-BREAK: break-all;}.tbl-header {overflow: hidden;left: 0;right: 0;}.tbl-content {height: 650px;overflow-x: auto;margin-top: 0px;}th {width: 120px;padding: 20px 15px;text-align: left;font-weight: 500;font-size: 12px;text-transform: uppercase;}td {width: 120px;padding: 15px;text-align: left;vertical-align: middle;font-weight: 300;font-size: 12px;border-bottom: solid 1px rgba(255, 255, 255, 0.1);}
2.html部分
<div class="tbl-header"><table cellpadding="0" cellspacing="0" border="0"><thead><tr><th>Jobseeker No.</th><th>Jobseeker</th><th>State</th><th class="document">Document</th><th>Job Title</th><th>Email</th><th>Phone</th><th>Employer</th><th>Work experience</th><th>Other details</th><th>Operation</th></tr></thead></table></div><div class="tbl-content"><table cellpadding="0" cellspacing="0" border="0"><tbody id="tlist"><tr><td>1111111</th><td>2222222</th><td>3333333</th><td>4444444</th><td>5555555</th><td>6666666</th><td>7777777</th><td>8888888</th><td>9999999</th><td>0000000</th><td>0000000</th></tr><tr><td>1111111</th><td>2222222</th><td>3333333</th><td>4444444</th><td>5555555</th><td>6666666</th><td>7777777</th><td>8888888</th><td>9999999</th><td>0000000</th><td>0000000</th></tr><tr><td>1111111</th><td>2222222</th><td>3333333</th><td>4444444</th><td>5555555</th><td>6666666</th><td>7777777</th><td>8888888</th><td>9999999</th><td>0000000</th><td>0000000</th></tr><tr><td>1111111</th><td>2222222</th><td>3333333</th><td>4444444</th><td>5555555</th><td>6666666</th><td>7777777</th><td>8888888</th><td>9999999</th><td>0000000</th><td>0000000</th></tr></tbody></table></div>
3.js部分
<script type="text/javascript">$(window).on("load resize ", function() {var scrollWidth = $('.tbl-content').width() - $('.tbl-content table').width();$('.tbl-header').css({'padding-right': scrollWidth});}).resize();$(function() {$('.tbl-content').on('scroll', function() {$(".tbl-header").scrollLeft($('.tbl-content').scrollLeft());});})</script>
