使用HTML冻结表头[复制]

<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>

<div align="center" id="id1" style="height: 240px;overflow:auto">
<table id="tbl" class="class1" align="center" width="100%" border="1">
    <thead>
        <tr>
            <th class="first"><input type="checkbox" id="select-all"></th>
            <th class="second">Edit</th>
            <th class="third">&nbsp;</th>
            <th class="fourth">Timestamp</th>
        </tr>
    </thead>
    <tr>
        <td class="first"><input class="selects" type="checkbox" value="A1" id="r0"></td>
        <td class="second"><a target="_blank" href="www.uitshj.org?show=A1">1</a></td>
        <td class="third"><a href="#" class='option' id='option_1' >Option 1</a></td>
        <td class="fourth">2018-08-26T10:38:01.602Z</td>
    </tr>
    <tr>
        <td class="first"><input class="selects" type="checkbox" value="B1" id="r1"></td>
        <td class="second"><a target="_blank" href="www.uitshj.org?show=B1">2</a></td>
        <td class="third"><a href="#" class='option' id='option_2' >Option 2</a></td>
        <td class="fourth">2018-08-26T10:23:42.119Z</td>
    </tr>
    <tr>
        <td class="first"><input class="selects" type="checkbox" value="C1" id="r2"></td>
        <td class="second"><a target="_blank" href="www.uitshj.org?show=C1">3</a></td>
        <td class="third"><a href="#" class='option' id='option_3'>Option 3</a></td>
        <td class="fourth">2018-08-26T01:05:00.171Z</td>
    </tr>
</table>
</div>

<script>

var myJson = {
  option_1: {'name': 'Clark', age:'39', address:'Washington D.C.'},
  option_2: {'name': 'Bob', age:'26', address:'Texas'},
  option_3: {'name': 'Angelina', age:'31', address:'Ohio'}
}

$(document).ready(function(){
  $('.option').click(function(e){
    e.preventDefault();
    id = $(this).attr('id');
    values = myJson[id];

    parent = $(this).parent('td')
    existing_content = parent.find('.option_content')
    if( existing_content.length ){ //if content exists, remove it
      existing_content.remove()
    } else { //else add the content
      content = "<div class='option_content'>" + values.name + "<br>" + values.age + "<br>" + values.address + "</div>";
      $(this).after(content)
    }
  })
})
</script>