这是我的代码,它是包含大量行的表。我想修复标题并添加垂直滚动:
table.blueTable {
border: 1px solid #1C6EA4;
background-color: #EEEEEE;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table.blueTable td, table.blueTable th {
border: 1px solid #AAAAAA;
padding: 3px 2px;
}
table.blueTable tbody td {
font-size: 13px;
}
table.blueTable tr:nth-child(even) {
background: #D0E4F5;
}
table.blueTable thead {
background: #1C6EA4;
background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
border-bottom: 2px solid #444444;
}
table.blueTable thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
border-left: 2px solid #D0E4F5;
}
table.blueTable thead th:first-child {
border-left: none;
}
table.blueTable tfoot {
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
background: #D0E4F5;
background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
border-top: 2px solid #444444;
}
table.blueTable tfoot td {
font-size: 14px;
}
table.blueTable tfoot .links {
text-align: right;
}
table.blueTable tfoot .links a{
display: inline-block;
background: #1C6EA4;
color: #FFFFFF;
padding: 2px 8px;
border-radius: 5px;
}
.blackcolor {
color: black;
font-weight: bold;
}
.greencolor {
color: darkgreen;
font-weight: bold;
}
#mytable{
height: 80%;
overflow-y: scroll !important;
}
<table class="blueTable fixed_header" id="mytable">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Time</th>
<th>Amount</th>
<th>Status</th>
</tr>
</thead>
<!--<tfoot>-->
<!--<tr>-->
<!--<td colspan="5">-->
<!--<div class="links"><a href="#">«</a> <a class="active" href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">»</a></div>-->
<!--</td>-->
<!--</tr>-->
<!--</tfoot>-->
<tbody id="tablebody">
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
</tbody>
</table>
为了做到这一点,我添加了css:
.fixed_header tbody{
display:block;
overflow:auto;
height:100%;
width:100%;
}
.fixed_header thead tr{
display:block;
width: 100%;
}
但我的所有细胞都缩小以适应细胞的含量:
var tablebody = null;
$(document).ready(function () {
tablebody = $("#tablebody");
tablebody.find("tr").addClass("greencolor");
$('#mytable').css({ 'overflow-y': 'scroll' });
});
table.blueTable {
border: 1px solid #1C6EA4;
background-color: #EEEEEE;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table.blueTable td, table.blueTable th {
border: 1px solid #AAAAAA;
padding: 3px 2px;
}
table.blueTable tbody td {
font-size: 13px;
}
table.blueTable tr:nth-child(even) {
background: #D0E4F5;
}
table.blueTable thead {
background: #1C6EA4;
background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
border-bottom: 2px solid #444444;
}
table.blueTable thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
border-left: 2px solid #D0E4F5;
}
table.blueTable thead th:first-child {
border-left: none;
}
table.blueTable tfoot {
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
background: #D0E4F5;
background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
border-top: 2px solid #444444;
}
table.blueTable tfoot td {
font-size: 14px;
}
table.blueTable tfoot .links {
text-align: right;
}
table.blueTable tfoot .links a{
display: inline-block;
background: #1C6EA4;
color: #FFFFFF;
padding: 2px 8px;
border-radius: 5px;
}
.blackcolor {
color: black;
font-weight: bold;
}
.greencolor {
color: darkgreen;
font-weight: bold;
}
#mytable{
height: 80%;
overflow-y: scroll !important;
}
.fixed_header tbody{
display:block;
overflow:auto;
height:100%;
width:100%;
}
.fixed_header thead tr{
display:block;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="blueTable fixed_header" id="mytable">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Time</th>
<th>Amount</th>
<th>Status</th>
</tr>
</thead>
<!--<tfoot>-->
<!--<tr>-->
<!--<td colspan="5">-->
<!--<div class="links"><a href="#">«</a> <a class="active" href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">»</a></div>-->
<!--</td>-->
<!--</tr>-->
<!--</tfoot>-->
<tbody id="tablebody">
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
<tr><td>cell1_1</td><td>Some address line here</td><td>12:00-15:00</td><td>44</td><td>Delivered</td></tr>
</tbody>
</table>
这是因为display:block,这是添加滚动和修复标题所必需的。我该如何解决这个问题?由于某种原因,最后一个片段只显示一行,在我这边我有以下视图:
如您所见,有滚动,标题已修复,但现在所有单元格都缩小了
答案 0 :(得分:1)
我也在寻找粘性标头的解决方案,以便在我的网站中使用它。最后找到了一个Jquery插件,可以无缝地完成这个粘性标题部分。也许你也应该试一试。
https://github.com/jmosbech/StickyTableHeaders
你不需要添加任何CSS,插件会处理它。它在滚动期间克隆表头。初始化非常简单
$('table').stickyTableHeaders();
希望这会有所帮助:)
答案 1 :(得分:0)
对于信息。 有位置:粘;假设做这种工作。
table.blueTable thead {
position:sticky;
top:0;
}
你可以在这里阅读:https://css-tricks.com/position-sticky-2/它还讨论旧浏览器的polyfills(js)。
下面的CSS演示测试
table.blueTable {
border: 1px solid #1C6EA4;
background-color: #EEEEEE;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table.blueTable td,
table.blueTable th {
border: 1px solid #AAAAAA;
padding: 3px 2px;
}
table.blueTable tbody td {
font-size: 13px;
}
table.blueTable tr:nth-child(even) {
background: #D0E4F5;
}
table.blueTable thead {
position: sticky;
top: 0;
background: #1C6EA4;
background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
border-bottom: 2px solid #444444;
}
table.blueTable thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
border-left: 2px solid #D0E4F5;
}
table.blueTable thead th:first-child {
border-left: none;
}
table.blueTable tfoot {
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
background: #D0E4F5;
background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
border-top: 2px solid #444444;
}
table.blueTable tfoot td {
font-size: 14px;
}
table.blueTable tfoot .links {
text-align: right;
}
table.blueTable tfoot .links a {
display: inline-block;
background: #1C6EA4;
color: #FFFFFF;
padding: 2px 8px;
border-radius: 5px;
}
.blackcolor {
color: black;
font-weight: bold;
}
.greencolor {
color: darkgreen;
font-weight: bold;
}
#mytable {
height: 80%;
overflow-y: scroll !important;
}
<table class="blueTable fixed_header" id="mytable">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Time</th>
<th>Amount</th>
<th>Status</th>
</tr>
</thead>
<!-- thead could be cloned into tfoot to be set in a fixed position -->
<!--<tfoot>-->
<!--<tr>-->
<!--<td colspan="5">-->
<!--<div class="links"><a href="#">«</a> <a class="active" href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">»</a></div>-->
<!--</td>-->
<!--</tr>-->
<!--</tfoot>-->
<tbody id="tablebody">
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
<tr>
<td>cell1_1</td>
<td>Some address line here</td>
<td>12:00-15:00</td>
<td>44</td>
<td>Delivered</td>
</tr>
</tbody>
</table>