Javascript 我希望表头是固定的，表体可以滚动过滤_Javascript_Jquery_Html_Css_Angularjs

Javascript 我希望表头是固定的，表体可以滚动过滤

javascript jquery html css angularjs

Javascript 我希望表头是固定的，表体可以滚动过滤,javascript,jquery,html,css,angularjs,Javascript,Jquery,Html,Css,Angularjs,我希望表头是固定的，表体可以滚动，左侧有过滤器（整页可以滚动），保持表体和表头的对齐，其中宽度、填充和边距都是百分比。还必须保持响应能力 HTML <div id="tabletop" class="col-sm-10 mail_view" style="margin-top: 28px;"> <div id="loadtable" style="position: relative;"> <table id="datatable" cla

我希望表头是固定的，表体可以滚动，左侧有过滤器（整页可以滚动），保持表体和表头的对齐，其中宽度、填充和边距都是百分比。还必须保持响应能力

HTML

<div id="tabletop" class="col-sm-10 mail_view" style="margin-top: 28px;">
    <div id="loadtable" style="position: relative;">
        <table id="datatable" class="table table-striped dataTable no-footer" role="grid" aria-describedby="datatable_info" style="position: relative;">
            <thead id="tablerecords" class="ranktablehead">
                <tr role="row">
                    <th class="table-head aligncenter" style="width: 8%; color: #a6a5a5 !important;">SL NO</th>
                    <th class="sorting_asc aligncenter" id="Name" tabindex="0" aria-label="Name: activate to sort column ascending" aria-controls="datatable" rowspan="1" colspan="1" aria-sort="ascending" style="width: 17%; color:#a6a5a5;">
                        <span style="cursor:pointer" ng-click="changeSorting('Name')">NAME</span></th>
                    <th class="sorting aligncenter" id="Location" tabindex="0" aria-label="Location: activate to sort column ascending" aria-controls="datatable" rowspan="1" colspan="1" aria-sort="ascending" style="width: 13%; color:#a6a5a5;">
                        <span style="cursor:pointer" ng-click="changeSorting('Location')">LOCATION</span></th>
                    <th class="sorting aligncenter" id="City" tabindex="0" aria-label="City: activate to sort column ascending" aria-controls="datatable" rowspan="1" colspan="1" aria-sort="ascending" style="width: 12%; color:#a6a5a5;">
                        <span style="cursor:pointer" ng-click="changeSorting('City')">CITY</span></th>
                    <th class="sorting aligncenter" id="Region" tabindex="0" aria-label="Region: activate to sort column ascending" aria-controls="datatable" rowspan="1" colspan="1" aria-sort="ascending" style="width: 12%; color:#a6a5a5;">
                        <span style="cursor:pointer" ng-click="changeSorting('Region')">REGION</span></th>
                    <th class="sorting aligncenter" id="Country" tabindex="0" aria-label="Country: activate to sort column ascending" aria-controls="datatable" rowspan="1" colspan="1" aria-sort="ascending" style="width: 13%; color:#a6a5a5;">
                        <span style="cursor:pointer" ng-click="changeSorting('Country')">COUNTRY</span></th>
                    <th class="sorting aligncenter" id="World" tabindex="0" aria-label="World: activate to sort column ascending" aria-controls="datatable" rowspan="1" colspan="1" aria-sort="ascending" style="width: 12%; color:#a6a5a5;">
                        <span style="cursor:pointer" ng-click="changeSorting('World')">WORLD</span></th>
                    <th style="width: 12%;"></th>
                    <th style="width: 1%;"></th>
                </tr>
                <tr id="bulkrank" ng-show="selectall" class="rankerrecord" style="background-color: #356192;">
                    <td colspan="3" class="aligncenter" style="vertical-align: middle; font-size: 14px; width: 29%;">{{companySelected}} company(s) selected</td>
                    <td style="vertical-align: middle; font-size: 14px; width: 12%;" class="aligncenter">
                        <select class="backgroundColortextBox selectcard" ng-model="mass_rank_city" ng-selected={{mass_rank_city}}>
                            <option value="None">None</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </td>
                    <td style="vertical-align: middle; font-size: 14px; width: 12%;" class="aligncenter">
                        <select class="backgroundColortextBox selectcard" ng-model="mass_rank_region">
                            <option value="None" selected="selected">None</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </td>
                    <td style="vertical-align: middle; font-size: 14px; width: 13%;" class="aligncenter">
                        <select class="backgroundColortextBox selectcard" ng-model="mass_rank_country">
                            <option value="None" selected="selected">None</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </td>
                    <td style="vertical-align: middle; font-size: 14px; width: 12%;" rowspan="{{item.locations.length}}" ng-hide="$index>0" class="aligncenter">
                        <select class="backgroundColortextBox selectcard " ng-model="mass_rank_world">
                            <option value="None" selected="selected">None</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </td>
                    <td style="vertical-align: middle; font-size: 14px; width: 12%;" id="saveRankBorder{{item['Sl No']}}" rowspan="{{item.locations.length}}" ng-hide="$index>0" class="aligncenter">
                        <a class="rankersavecancel" ng-click="saveMassRanksRequest()" title="Save"><img src="/images/right.png" width="21" height="21"></a>
                        <a id="undo{{item['Sl No']}}" ng-click="undoMassRanks()" class="rankersavecancel" title='Undo' ng-disabled="false"><img src="/images/cross.png" width="21" height="21">
                        </a>
                    </td>
                    <td style=width:1% "></td>
                                                                    </tr>
                                                                </thead>
                                                                <tbody id="tablecontent " ng-repeat="item in items track by $index " style=" ">
                                                                    <tr class="rankerrecord " ng-repeat="member in item.locations " id="rowrank ">
                                                                        <td rowspan="{{item.locations.length}} "
                                                                            ng-hide="$index>0" ng-model="item.slno" class="rank-card-text-center" style="vertical-align: middle; font-size: 14px; width: 8%; color: #eeeeee;">{{item['Sl No']}}</td>
                    <td rowspan="{{item.locations.length}}" ng-hide="$index>0" ng-model="item.companyname" class="rank-card-text-center alignleft" style="vertical-align: middle; font-size: 14px;  width: 17%; "><a data-toggle="modal" data-target="#myModal" ng-click="companyDetails(item._id, item.Name)" style="cursor: pointer; color: #3b88da !important;">{{item.Name}}</a></td>
                    <td class="" style="vertical-align: middle; font-size: 14px; width: 13%;" ng-model="member.location">{{member.location}}</td>
                    <td style="vertical-align: middle; width: 13%;" class="aligncenter">
                        <select class="backgroundColortextBox selectcard" ng-model="member.rank_city" ng-focus="saveinitial(item,member.rank_city,member.rank_region,member.rank_country,item.rank_world)">
                            <option ng-repeat="opt in item.values">{{opt.val}}</option>
                        </select>
                    </td>
                    <td style="vertical-align: middle; font-size: 14px; width: 12%;" class="aligncenter">
                        <select class="backgroundColortextBox selectcard" ng-model="member.rank_region" ng-focus="saveinitial(item,member.rank_city,member.rank_region,member.rank_country,item.rank_world)">
                            <option ng-repeat="opt in item.values">{{opt.val}}</option>
                        </select>
                    </td>
                    <td style="vertical-align: middle; font-size: 14px; width: 13%;" class="aligncenter">
                        <select class="backgroundColortextBox selectcard" ng-model="member.rank_country" ng-focus="saveinitial(item,member.rank_city,member.rank_region,member.rank_country,item.rank_world)">
                            <option ng-repeat="opt in item.values">{{opt.val}}</option>
                        </select>
                    </td>
                    <td style="vertical-align: middle; font-size: 14px; width: 13%;" rowspan="{{item.locations.length}}" ng-hide="$index>0" class="aligncenter">
                        <select class="backgroundColortextBox selectcard" ng-model="item.rank_world" ng-focus="saveinitial(item,member.rank_city,member.rank_region,member.rank_country,item.rank_world)">
                            <option ng-repeat="opt in item.values">{{opt.val}}</option>
                        </select>
                    </td>
                    <td style="vertical-align: middle; width: 12%;" rowspan="{{item.locations.length}}" ng-hide="$index>0" class="rank-card-text-center">
                        <a class="rankersavecancel" ng-click="saveranks(item)" title="Save"><img src="/images/right.png" width="21" height="21"></a>
                        <a id="undo{{item['Sl No']}}" ng-click="undoranks(item)" class="rankersavecancel" title='Undo' ng-disabled="false"><img src="/images/cross.png" width="21" height="21">
                        </a>
                        <input type="checkbox" id="{{item._id}}" ng-checked="{{item.isSelected}}" ng-click="removeObjectIdFromMasskRank(item,selectall)" class="rankersavecancel" />
                    </td>
                    <td style="width: 1%;" id="saveRankBorder{{item['Sl No']}}"></td>
                </tr>
                </tbody>
        </table>
    </div>
    <div id="nopagination" style="margin: 0 auto; text-align: center"></div>
    <div class="pagination" id="pagination" style="float:right">
        <ul class="pagination">
            <li ng-class="prevPageDisabled()"><a href ng-click="firstPage()">First</a></li>
            <li ng-class="prevPageDisabled()"><a href ng-click="prevPage()">Prev</a></li>
            <li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)"><a href>{{n+1}}</a></li>
            <li ng-class="nextPageDisabled()"><a href ng-click="nextPage()">Next</a></li>
            <li ng-class="nextPageDisabled()"><a href ng-click="lastPage()">Last</a></li>
        </ul>
    </div>
</div>

这种问题已经在另一个线程中解决了。这是对其他人提出的解决方案的篡改


可乐
可乐
可乐
t车身>
信息
信息
信息
信息
信息
信息
信息
信息
信息

这个人刚刚为它做了第二张桌子。不过，它有一点jQuery功能。

请查找以下代码：

<html>
  <head>
    <title>Demo</title>
    <style>
      .aws-main {
        display: block;
      }
      .aws-left-sidebar {
        float: left;
        max-height: 320px;
        width: 20%;
        padding: 10px;
        background-color: #EEE;
        box-sizing: border-box;
        overflow-y: scroll;
      }
      .aws-filter { padding: 10px 0; }
      .aws-right-sidebar {
        float: left;
        width: 80%;
        box-sizing: border-box;
      }
      .aws-fixed-header {
        padding: 0;
      }
      .aws-fixed-header thead {
        display: block;
        background-color: #333;
        color: #FFF;
      }
      .aws-fixed-header tbody {
        display: block;
        max-height: 300px;
        width: 100%;
        overflow-y: scroll;
      }
      .aws-fixed-header tr td {
        width: 200px;
        padding: 5px 10px;
      }
      .aws-fixed-header tbody tr {
        background-color: #EEE;
      }
      .aws-fixed-header tbody tr:nth-child(2n) {
        background-color: #FFF;
      }
    </style>
  </head>
  <body>
    <div class="aws-main">
      <div class="aws-left-sidebar">
        <div class="aws-filter">Filter</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
      </div>
      <div class="aws-right-sidebar">
        <table class="aws-fixed-header">
          <thead>
            <tr>
              <td>Sl. No.</td>
              <td>Name</td>
              <td>Age</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>2</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>2</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>4</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>4</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>1</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>5</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>6</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>7</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>


演示
.aws main{
显示：块；
}
.aws左侧边栏{
浮动：左；
最大高度：320px；
宽度：20%；
填充：10px；
背景色：#EEE；
框大小：边框框；
溢出y：滚动；
}
.aws筛选器{填充：10px 0；}
.aws右侧边栏{
浮动：左；
宽度：80%；
框大小：边框框；
}
.aws固定收割台{
填充：0；
}
.aws固定收割台THAD{
显示：块；
背景色：#333；
颜色：#FFF；
}
.aws固定式收割台t车身{
显示：块；
最大高度：300px；
宽度：100%；
溢出y：滚动；
}
.aws固定收割台tr td{
宽度：200px；
填充物：5px10px；
}
.aws固定式收割台tbody tr{
背景色：#EEE；
}
.aws固定收割台tbody tr:n第n个子（2n）{
背景色：#FFF；
}
滤器
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
信息
序号。
名称
年龄
1.
无名氏
24
2.
无名氏
24
2.
无名氏
24
4.
无名氏
24
4.
无名氏
24
1.
无名氏
24
5.
无名氏
24
6.
无名氏
24
7.
无名氏
24
8.
无名氏
24
8.
无名氏
24
8.
无名氏
24
8.
无名氏
24
8.
无名氏
24
8.
无名氏
24
8.
无名氏
24
8.
无名氏
24
8.
无名氏
24
8.
无名氏
24
8.
无名氏
24
8.
无名氏
24
8.
无名氏
24
8.
无名氏
24
8.
无名氏
24
8.
无名氏
24
8.
无名氏
24
8.
无名氏
24
8.
无名氏
24
8.
无名氏
24
8.
无名氏
24

请发布您尝试过的代码。Filter Sl.No.Name Age 1 John Doe 24 hi，我已经在queryHi@PradeepKumarSJoshi中添加了上述代码，请将原始代码发布到您尝试过的要启用滚动的地方，不是复制粘贴一行随机代码的东西。首先自己尝试一下，如果你不能让它工作，请在这里寻求帮助，并提供你自己尝试过的完整代码。请不要认为这里的每个人都是“理所当然的”。嗨@SE，我是这种论坛的新用户。对不起我试过了，但找不到解决办法。所以贴了这个。我在上面粘贴了代码。

<table id="table-1">
  <thead>
    <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
    </tr>
  </thead>
  tbody>
    <tr>
        <td>info</td>
        <td>info</td>
        <td>info</td>
    </tr>
    <tr>
        <td>info</td>
        <td>info</td>
        <td>info</td>
    </tr>
    <tr>
        <td>info</td>
        <td>info</td>
        <td>info</td>
    </tr>
  </tbody>
  </table>
<table id="header-fixed"></table>

<html>
  <head>
    <title>Demo</title>
    <style>
      .aws-main {
        display: block;
      }
      .aws-left-sidebar {
        float: left;
        max-height: 320px;
        width: 20%;
        padding: 10px;
        background-color: #EEE;
        box-sizing: border-box;
        overflow-y: scroll;
      }
      .aws-filter { padding: 10px 0; }
      .aws-right-sidebar {
        float: left;
        width: 80%;
        box-sizing: border-box;
      }
      .aws-fixed-header {
        padding: 0;
      }
      .aws-fixed-header thead {
        display: block;
        background-color: #333;
        color: #FFF;
      }
      .aws-fixed-header tbody {
        display: block;
        max-height: 300px;
        width: 100%;
        overflow-y: scroll;
      }
      .aws-fixed-header tr td {
        width: 200px;
        padding: 5px 10px;
      }
      .aws-fixed-header tbody tr {
        background-color: #EEE;
      }
      .aws-fixed-header tbody tr:nth-child(2n) {
        background-color: #FFF;
      }
    </style>
  </head>
  <body>
    <div class="aws-main">
      <div class="aws-left-sidebar">
        <div class="aws-filter">Filter</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
        <div class="aws-filter">Info</div>
      </div>
      <div class="aws-right-sidebar">
        <table class="aws-fixed-header">
          <thead>
            <tr>
              <td>Sl. No.</td>
              <td>Name</td>
              <td>Age</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>2</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>2</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>4</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>4</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>1</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>5</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>6</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>7</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
            <tr>
              <td>8</td>
              <td>John Doe</td>
              <td>24</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>