【发布时间】:2018-11-25 23:28:31
【问题描述】:
这是我的代码,它是包含很多行的表格。我想修复标题并添加垂直滚动:
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>
这是由于显示:块,这是添加滚动和修复标题所必需的。我该如何解决这个问题?最后一个 sn-p 由于某种原因只显示一行,在我这边我有以下观点:
如你所见,有滚动,标题是固定的,但现在所有单元格都缩小了
【问题讨论】:
标签: html css html-table bootstrap-4