响应式网站制作表格添加横向滚动条并隐藏滚动条

原创 云彩店  2020-05-23 02:15  阅读 89 次

最近在自己的云彩店博客上添加一个表格,由于HTML的table表格的列数太多或者某一列的内容太长,就会导致表格td的内容被挤压变形,对后台的使用体验非常不友好。

那么如何在表格列数较多的情况下添加横向滚动条?其实很简单,只需要给table外面包一层div,设置width、height 和最重要的 overflow:scroll,代码如下:

<div style="width: 100%; height: 370px; overflow: scroll;">

表格比较宽时,为适应手机屏幕宽度,会自动对各列进行压缩,内容分多行显示。我们希望表格显示不下时,不改变列宽度,而是出现滚动杆,保持表格原来的外观。让表格单元内容不换行,可通过设置white-space: nowrap属性来实现,代码如下:

<div style="width: 100%; height: 370px; white-space: nowrap; overflow: scroll;">

隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,在容器外面再嵌套一层overflow:hidden,内部内容再限制尺寸和外部嵌套层一样,就实现变相隐藏了;最后再加个{padding-bottom: 30px; margin-bottom: -13px;}就可以实现隐藏横向滚动条,代码如下:

<div class="outer-container" style="width: 100%; height: 270px; overflow: hidden;">
<div class="inner-container" style="width: 103%; height: 290px; overflow: scroll; padding-bottom: 27px; margin-bottom: -13px;">
<div style="width: 770px; height: 290px; white-space: nowrap;">
<table style="width: 97%; border-collapse: collapse; ">

如下表格没有隐藏滚动条示例:

日期 推荐 SP 赛果 推荐 SP 赛果
5月23日 001让胜//让平 001让胜//让平 9.99-9.99 盼红 001让胜//让平 001让胜//让平 9.99-9.99 盼红
5月23日 001让胜//让平 001让胜//让平 9.99-9.99 盼红 001让胜//让平 001让胜//让平 9.99-9.99 盼红
5月23日 001让胜//让平 001让胜//让平 9.99-9.99 盼红 001让胜//让平 001让胜//让平 9.99-9.99 盼红
5月23日 001让胜//让平 001让胜//让平 9.99-9.99 盼红 001让胜//让平 001让胜//让平 9.99-9.99 盼红
5月23日 001让胜//让平 001让胜//让平 9.99-9.99 盼红 001让胜//让平 001让胜//让平 9.99-9.99 盼红
5月23日 001让胜//让平 001让胜//让平 9.99-9.99 盼红 001让胜//让平 001让胜//让平 9.99-9.99 盼红
5月23日 001让胜//让平 001让胜//让平 9.99-9.99 盼红 001让胜//让平 001让胜//让平 9.99-9.99 盼红
5月23日 001让胜//让平 001让胜//让平 9.99-9.99 盼红 001让胜//让平 001让胜//让平 9.99-9.99 盼红
5月23日 001让胜//让平 001让胜//让平 9.99-9.99 盼红 001让胜//让平 001让胜//让平 9.99-9.99 盼红

 


隐藏滚动条示例:

5月24日 001让胜//让平 001让胜//让平 9.99-9.99 祝红 001让胜//让平 001让胜//让平 9.99-9.99 祝红
5月24日 001让胜//让平 001让胜//让平 9.99-9.99 祝红 001让胜//让平 001让胜//让平 9.99-9.99 祝红
5月24日 001让胜//让平 001让胜//让平 9.99-9.99 祝红 001让胜//让平 001让胜//让平 9.99-9.99 祝红
5月24日 001让胜//让平 001让胜//让平 9.99-9.99 祝红 001让胜//让平 001让胜//让平 9.99-9.99 祝红
5月24日 001让胜//让平 001让胜//让平 9.99-9.99 祝红 001让胜//让平 001让胜//让平 9.99-9.99 祝红
5月24日 001让胜//让平 001让胜//让平 9.99-9.99 祝红 001让胜//让平 001让胜//让平 9.99-9.99 祝红
5月24日 001让胜//让平 001让胜//让平 9.99-9.99 祝红 001让胜//让平 001让胜//让平 9.99-9.99 祝红
5月24日 001让胜//让平 001让胜//让平 9.99-9.99 祝红   001让胜//让平 001让胜//让平 9.99-9.99 祝红
5月24日 001让胜//让平 001让胜//让平 9.99-9.99 祝红   001让胜//让平 001让胜//让平 9.99-9.99 祝红
5月24日 001让胜//让平 001让胜//让平 9.99-9.99 祝红   001让胜//让平 001让胜//让平 9.99-9.99 祝红
5月24日 001让胜//让平 001让胜//让平 9.99-9.99 祝红   001让胜//让平 001让胜//让平 9.99-9.99 祝红
本文地址:https://www.87caiba.com/925.html
版权声明:本文为原创文章,版权归 云彩店 所有,欢迎分享本文,转载请保留出处!

发表评论


表情