解决了
.table-wrapper { overflow-x:scroll; overflow-y:visible; width:250px; margin-left: 120px;}td, th { padding: 5px 20px; width: 100px;}th:first-child { position: fixed; left: 5px}更新
$(function () { $('.table-wrapper tr').each(function () { var tr = $(this), h = 0; tr.children().each(function () { var td = $(this), tdh = td.height(); if (tdh > h) h = tdh; }); tr.css({height: h + 'px'}); });});body { position: relative;}.table-wrapper { overflow-x:scroll; overflow-y:visible; width:200px; margin-left: 120px;}td, th { padding: 5px 20px; width: 100px;}tbody tr {}th:first-child { position: absolute; left: 5px}<!DOCTYPE html><html><head><script src="https://pre.jquery.com/jquery-2.2.3.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title></head><body><div> <h1>SOME RANDOM TEXT</h1></div><div > <table id="consumption-data" > <thead > <tr> <th>Month</th> <th>Item 1</th> <th>Item 2</th> <th>Item 3</th> <th>Item 4</th> </tr> </thead> <tbody > <tr> <th>Jan is an awesome month</th> <td>3163</td> <td>3163</td> <td>3163</td> <td>3163</td> </tr> <tr> <th>Feb</th> <td>3163</td> <td>3163</td> <td>3163</td> <td>3163</td> </tr> <tr> <th>Mar</th> <td>3163</td> <td>3163</td> <td>3163</td> <td>3163</td> </tr> <tr> <th>Apr</th> <td>3163</td> <td>3163</td> <td>3163</td> <td>3163</td> </tr> <tr> <th>May</th> <td>3163</td> <td>3163</td> <td>3163</td> <td>3163</td> </tr> <tr> <th>Jun</th> <td>3163</td> <td>3163</td> <td>3163</td> <td>3163</td> </tr> <tr> <th>...</th> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> </tbody> </table></div><div></div></body></html>
