0
我想修改html表头。我在表格中有很多列,因此需要垂直滚动条来滚动并查看列数据。我想修复表格标题,以便当用户向下滚动以查看行时,标题是固定的。 请查阅演示http://jsfiddle.net/ZcLSE/1425/。 当用户向下滚动表头时,应该是固定的,对用户可见。请咨询。当水平和垂直滚动条可用时修复表格标题
CSS代码:
.modal-body {
overflow-y: auto;
}
tbody {
}
thead, tbody tr {
}
thead {
width: calc(100% - 1em)
}
table {border-collapse:collapse; height:300px;overflow: auto;
display: block;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
HTML代码:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body" id="modal-body">
<table class="table" border="1">
<thead>
<tr>
<td>Namffffffffffffffffffffffffe</td>
<td>phone</td>
<td>Address</td>
<td>Street</td>
<td>City</td>
<td>Pin</td>
<td>Comments</td>
<td>info</td>
<td>Amount</td>
<td>percentage</td>
<td>total</td>
</tr>
</thead>
<tbody>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
PS:需要垂直和水平滚动条,表中的标题应该是固定的。
可能的重复[HTML表与固定标题?](http://stackoverflow.com/questions/673153/html-table-with-fixed-headers) –
另外,请阅读[问]。重要短语:“搜索和研究”和“解释......阻止你自己解决它的任何困难”。 –
@MikeMcCaughan - 它不重复,在他们正在使用jquery,我正在处理纯CSS的文章。我努力解决和问题是当我添加水平滚动条,固定标题是没有更多的工作。 – user3684675