<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

<div class="table-container header">

  <table border>

    <thead>

      <tr>

        <th>

          表头1

        </th>

        <th>

          表头2

        </th>

      </tr>

    </thead>

  </table>

</div>

<div class="table-container body">

  <table border>

    <tr>

      <td>

        列1

      </td>

      <td>

        列2

      </td>

    </tr>

    <tr>

      <td>

        列1

      </td>

      <td>

        列2

      </td>

    </tr>

    <tr>

      <td>

        列1

      </td>

      <td>

        列2

      </td>

    </tr>

    <tr>

      <td>

        列1

      </td>

      <td>

        列2

      </td>

    </tr>

    <tr>

      <td>

        列1

      </td>

      <td>

        列2

      </td>

    </tr>

    <tr>

      <td>

        列1

      </td>

      <td>

        列2

      </td>

    </tr>

    <tr>

      <td>

        列1

      </td>

      <td>

        列2

      </td>

    </tr>

  </table>

</div>

var containerDom = $(".table-container.body");

if (containerDom && containerDom.length) {

  var onScroll = function () {

    var translate = "translate(-" + this.scrollLeft + "px,0px)";

    $(".header table").css('transform', translate);

  };

  containerDom.on('scroll', onScroll);

}

table{

  border-collapse: collapse;

  width:300px;

}

.body table{

  border-top: hidden;

}

​

.table-container {

    overflow: auto;

    max-height: 100px;

    width: 200px;

}

​

.table-container.header {

  overflow: hidden;

}