html中表格固定表头

html：

<div class="table_div_wrap">
    <div class="table_thead">
        <table cellpadding="0" cellspacing="0">
            <thead>
            <tr>
                <th>first</th>
                <th>second</th>
                <th>third</th>
            </tr>
            </thead>
        </table>
    </div>
    <div class="table_tbody">
        <table cellpadding="0" cellspacing="0">
            <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

css：（使用sass写的）

.table_div_wrap {
  border: 1px red solid;
  width: 80%;
  min-width: 800px;
  margin: 0 auto;
  margin-top: 100px;
  position: relative;
  overflow: hidden;
  .table_thead {
  }
  .table_tbody {
    width: 100%;
    height: 300px;
    overflow-y: auto;
    overflow-x: auto;
  }
  table {
    min-width: 100%;
    td,th{
      border-top:1px black solid;
      min-width: 500px;
    }
    th {
      border: none;
    }
  }
}

js：

var table_tbody = document.getElementsByClassName("table_tbody")[0];
    var table_thead = document.getElementsByClassName("table_thead")[0];
    table_tbody.onscroll = function () {
        table_thead.style.marginLeft = "-"+this.scrollLeft+"px"
    }