table表头不换行并允许横向滚动
2018-02-09 13:52
232 查看
一、滚动条一直显示
在< td>中加入nowrap=”nowrap”即可实现内容不换行的效果;滚动条效果需要通过设置overflow来实现。<div id="test" style="width: 800px; height: 80px; overflow-x: auto;overflow-y: hidden"> <table> <tr> <th nowrap="nowrap" style="padding-left:10px;padding-right:30px;">车辆的呼号</th> <th nowrap="nowrap" style="padding-right:10px;">值班中队长</th> <th nowrap="nowrap" style="padding-right:10px;">白天值班的老哥</th> <th nowrap="nowrap" style="padding-right:10px;">晚上值班的老哥</th> <th nowrap="nowrap" style="padding-right:30px;">排班时间</th> <th nowrap="nowrap" style="padding-right:10px;">状态</th> <th nowrap="nowrap" style="padding-right:30px;">车辆的呼号</th> <th nowrap="nowrap" style="padding-right:10px;">值班中队长</th> <th nowrap="nowrap" style="padding-right:10px;">白天值班的老哥</th> <th nowrap="nowrap" style="padding-right:10px;">晚上值班的老哥</th> <th nowrap="nowrap" style="padding-right:30px;">排班时间</th> <th nowrap="nowrap" style="padding-right:10px;">状态</th> </tr> <tr> <td style="padding-left:10px;">item.callsign</td> <td> item.dutyoffice </td> <td> item.daylaoge </td> <td> item.nightlaoge </td> <td> item.date </td> <td> item.status </td> <td> item.callsign </td> <td> item.dutyoffice </td> <td> item.daylaoge </td> <td> item.nightlaoge </td> <td> item.date </td> <td> item.status </td> </tr> </table>; </div>
对< td>设置padding属性时,根据不同的框架和浏览器,padding有时会不起效果,对于这种情况我们可以在< td>中加个< div>标签,代码如下:
<td><div style='display:inline-block;width:10px'></div> item.dutyDate </td>
二、滚动条先隐藏鼠标移过才显示
有时候为了美观,要先把滚动条隐藏起来,等鼠标移到元素上之后再显示滚动条,鼠标离开滚动条就恢复隐藏状态。<script type="text/javascript"> $(document).ready(function(){ $("#dutyControl").hover(function () { //$("#dutyControl").css("overflow-x", "auto"); $("#dutyControl").css("overflow", "auto"); }, function () { //$("#dutyControl").css("overflow-x", "hidden"); $("#dutyControl").css("overflow", "hidden"); }); }); </script> <div id="dutyControl" style="width: 800px; height: 80px; overflow-x: hidden;overflow-y: hidden"> <table> <tr> <th nowrap="nowrap" style="padding-left:10px;padding-right:30px;">车辆的呼号</th> <th nowrap="nowrap" style="padding-right:10px;">值班中队长</th> <th nowrap="nowrap" style="padding-right:10px;">白班的辅警</th> <th nowrap="nowrap" style="padding-right:10px;">夜班的辅警</th> <th nowrap="nowrap" style="padding-right:30px;">排班时间</th> <th nowrap="nowrap" style="padding-right:10px;">状态</th> <th nowrap="nowrap" style="padding-right:30px;">车辆的呼号</th> <th nowrap="nowrap" style="padding-right:10px;">值班中队长</th> <th nowrap="nowrap" style="padding-right:10px;">白班的辅警</th> <th nowrap="nowrap" style="padding-right:10px;">夜班的辅警</th> <th nowrap="nowrap" style="padding-right:30px;">排班时间</th> <th nowrap="nowrap" style="padding-right:10px;">状态</th> </tr> <tr> <td style="padding-left:10px;">item.callsign</td> <td> item.dutyoffice </td> <td> item.daystaff </td> <td> item.nightstaff </td> <td> item.date </td> <td> item.status </td> <td> item.callsign </td> <td> item.dutyoffice </td> <td> item.daystaff </td> <td> item.nightstaff </td> <td> item.date </td> <td> item.status </td> </tr> </table> </div>
相关文章推荐
- JS(JQ)实现table表格固定表头且表头可以随横向滚动而滚动
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- JS实现table表格固定表头且表头随横向滚动而滚动
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- JS(JQ)实现table表格固定表头且表头可以随横向滚动而滚动
- table表固定表头的滚动
- ListView的横向滚动(带表头与固定列)
- Chrome固定table表头thead,表体tbody滚动
- 实现table表头固定 内容滚动效果
- html table表头不变滚动表体
- table 表头固定,表体滚动的css方法
- 记录:固定table表头不动内容滚动
- operamasks ui 2.X omgrid bug 拖动横向滚动条时表体和表头错位
- table中head表头固定,body滚动
- 利用DTGridView实现横向滚动的tableview
- 【经典思维】table 表头固定,内容自由滚动
- GridView 实现固定表头,但可以纵向,横向滚动Item
- bootstrapTable表格表头换行
- 让UITableView的表头随着tableView一起滚动
- IOS tableview 横向滚动