我希望固定表头，并使用过滤器滚动表体

时间：2016-10-24 07:45:30

标签： javascript jquery html css angularjs

我想要固定表头，并且可以使用左侧的过滤器滚动表体（整个页面可滚动）保持主体和标题的对齐，其中宽度，填充和边距是百分比。还必须保持响应能力。

enter image description here

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>

CSS 

/* Filter Css */
.filtersList li { list - style: none;
    margin - bottom: 15 px; }
.filtersList li.reset { text - align: right }
    .filtersIinputSelect { width: 100 % ;padding: 5 px }
    .filtersList li select { width: 100 % }
    .mail_list_column, .x_panel, .mail_list, .mail_view { border: none;text - align: left; }
    .filterHeader { border - bottom: 1 px solid# d5d5d5;
        padding - bottom: 8 px;
        margin - bottom: 15 px;
        margin - top: 7 px;
        font - size: 13 px;
        color: #a6a5a5; }
    .filtersList li: last - child { margin - bottom: 0 px!important; }
    .delsecButton { width: 120 px!important;height: 30 px!important;cursor: not - allowed!important;color: rgba(252, 107, 107, 0.4);font - size: 13 px;border: 1 px solid# e11a1a;background: transparent;border - radius: 5 px }
    .secButton { width: 120 px!important;height: 30 px!important;font - size: 13 px;border: 1 px solid #3b88da;background:transparent; border-radius:0px}
.urlLinkcolor{color: # 3 b88da;cursor: pointer; }
    .addHover: hover { background - color: #3b88da; color:# fff }
    .urlLinkcolor: hover { font - decoration: underline; }
    .filterLabelFontsize label { font - size: 13 px;
        font - weight: normal; }
    .filterHeaderLabelFontsize { font - size: 14 px;
        font - weight: normal; }
    .filterLabelFontsize h5 { border - bottom: 1 px solid# d5d5d5;
        padding - bottom: 5 px; }
    .rankfilterlist { margin - bottom: 15 px; }
    .fiter - title {}

/* Pagination Css */
.pagination { text - align: right; }
.table - bordered > tbody > tr > td, .table - bordered > tbody > tr > th, .table - bordered > tfoot > tr > td, .table - bordered > tfoot > tr > th, .table - bordered > thead > tr > td, .table - bordered > thead > tr > th { border: none; }
    .table - striped > tbody > tr: nth - of - type(odd) { background - color: transparent; }
    .table > thead > tr > th { border - bottom: none; }
    .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { color: #fff }
    .backgroundColortextBox { background - color: #596473; border:none}
.navbar-default{background-color:# fff }

/* Company Info Css  */
.companyInfoheader { background: #172436; padding:14px 0; border-bottom:1px solid # 91 c449;margin - bottom: 2 px;height: 45 px!important; }
.companyInfotitle { color: #fff;padding - left: 1 % ; }
.companyInfotitle { color: #fff;padding - left: 1.5 % ; }
.companyInfoMinMaxBox { width: 45 % ;padding: 5 px; }
.companyInfoLabelColor { color: #a6a5a5; }
.filter - bar - right - 5 { float: right;margin - right: 2 % ;margin - top: -.7 % ; }#
RightBox {
    box - shadow: 0 px 2 px 8 px rgba(0, 0, 0, 0.8);
    border: 1 px solid# fff;
    text - align: left;
    padding: 10 px 0;
    width: 98 % ;
    margin - left: 24 px;
    margin - top: 10 px;
}#
RightBox label { text - transform: uppercase }#
RightBox table { width: 75 % ;color: #fff;margin - left: 2 % }#
RightBox table tr td: nth - child(odd) { width: 120 px;padding - bottom: 10 px }#
RightBox table tr td: nth - child(even) { width: 240 px;padding - bottom: 10 px }#
RightBox: last - child {
        margin - bottom: 15 px;
    }
    .moredetails {
        float: right;
        margin - top: -25 px;
        font - weight: 500;
        color: #428BCA;
    background: transparent;
    border: none;
    outline: none;
    margin-right: 6%;
}
.moredetails:hover{text-decoration:underline}
.chkBox {
    float: right;
    margin-top: -50px !important;
    width: 2%;
    outline: none;
}
.row{font-family: 'Lato';}
.fa-sort-down:before, .fa-sort-desc:before{content: "\f0dd"; float: right;font-size: 15px; margin-top: -4px; padding-left: 5px;}
/* Calibrator Css */
# candidateCountborder,
        #companyCountborder { border: 1 px dashed# fff;margin - top: 33 px;height: 70 vh }#
        cleanupCountborder { border: 1 px dashed# fff;height: 70 vh }#
        candidatenumber { text - align: center;
            vertical - align: middle }
        /* Modal Css */
        .modal - header { background - color: #fff }
        .modal - heading { font - family: 'Lato', sans - serif;
            font - size: 18 px;
            font - weight: 300;
            text - align: left;
            color: #172436;}
.modal-url {font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 300; text-align: left; color: # 3 b88da; }
        .modal - label { font - family: 'Lato', sans - serif;
            font - size: 13 px;
            font - weight: normal;
            text - align: left;
            color: #d5d5d5!important;
            text - transform: capitalize; }
        .modal - data { font - size: 14 px;
            font - weight: normal;
            text - align: left;
            color: #ffffff; }
        .modal - content { background - color: #2f3a4a; margin-top:-7%; border-radius:0px !important}
.adminmodalIinputSelect{width: 80%; padding: 5px;}
.modaltable{color: # fff;
            width: 100 % ; }
        .modaltable tr td: first - child { width: 25 % ; }
            .modaltable tr td: last - child { width: 52 % ;margin - right: 15 % }
            .modal - dialog { margin - top: 10 % ; }
            .modal - footer { border: none;padding: 10 px 0 15 px 0; }
            .modalButtons {
                background - color: #596473; color: # FFFFFF;
                border - radius: 0 px;
                display: inline - block;
                margin - bottom: 0;
                font - size: 14 px;
                font - weight: 400;
                line - height: 1.42857143;
                text - align: center;
                white - space: nowrap;
                vertical - align: middle; - ms - touch - action: manipulation;
                touch - action: manipulation;
                cursor: pointer; - webkit - user - select: none; - moz - user - select: none; - ms - user - select: none;
                user - select: none;
                background - image: none;
                border: 1 px solid transparent;
            }#
        savemsg { color: #a6a5a5;padding - top: 5 px; }
        /* Add User Css */
        #
        adduser {
            display: none;
        }

        /* datatable common css */
        table.dataTable { margin - top: 0!important }
        table.dataTable thead.sorting: after,
        table.dataTable thead.sorting_asc: after,
        table.dataTable thead.sorting_desc: after,
        table.dataTable thead.sorting_asc_disabled: after,
        table.dataTable thead.sorting_desc_disabled: after {
            position: relative!important;
            bottom: -2 px!important;
            margin - left: 10 px!important;
            right: 0!important;
            display: inline!important;
            font - family: 'Glyphicons Halflings';
            opacity: 0.5;
        }
        table.dataTable thead.sorting,
        table.dataTable thead.sorting_asc,
        table.dataTable thead.sorting_desc,
        table.dataTable thead.sorting_asc_disabled,
        table.dataTable thead.sorting_desc_disabled {
            cursor: context - menu!important;
        }

        .selectcard {
            background: transparent;
            width: 74 px;
            height: 24 px;
            border: 1 px solid# ffffff;
            color: #ffffff;
            font - size: 14 px;
        }

        .selectcard: focus {
            background - color: #596473;
}

.modalcontentlabel {
    color: # FFFFFF!important;
        }

            .rankerrecord {
            height: 80 px;
            text - align: left justify;
            border: none!important;
            border - bottom: 1 px solid #596473;
}

.filter-input-height {
    height: 30px;
}

.table-head {
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: # d5d5d5!important;
        }

            .radio {
            display: inline - block;
            color: #c6c6c6;
        }

            .radio: active {
            color: #eeeeee!important;
        }

            .rankersavecancel {
            margin: 2 px 5 % ;
        }

            .radio - button {
            font - size: 14 px;
            font - weight: normal;
            color: #eeeeee;
        }

            table.dataTable thead.sorting: after,
        table.dataTable thead.sorting_asc: after,
        table.dataTable thead.sorting_desc: after,
        table.dataTable thead.sorting_asc_disabled: after,
        table.dataTable thead.sorting_desc_disabled: after {
            position: relative!important;
            bottom: -2 px!important;
            margin - left: 10 px!important;
            right: 0!important;
            display: inline!important;
            font - family: 'Glyphicons Halflings';
            opacity: 0.5;
        }

            table.dataTable thead.sorting,
        table.dataTable thead.sorting_asc,
        table.dataTable thead.sorting_desc,
        table.dataTable thead.sorting_asc_disabled,
        table.dataTable thead.sorting_desc_disabled {
            cursor: context - menu!important;
        }

        .ranktablehead { position: fixed;background - color: #263141; border-bottom: 1px solid # FFFFFF;width: 76 % ;top: 104 px; }

2 个答案:

答案 0 :(得分：0)

这种问题已经在另一个线程中解决了。 以下是其他人提出的解决方案的小提琴。

http://jsfiddle.net/andrewwhitaker/fj8wM/ 

<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>

这个人刚刚为它做了第二张桌子。它虽然有点jQuery。

答案 1 :(得分：0)

请为您的目的找到以下代码：

<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>
相关问题
最新问题