表格自适应浏览器大小

        我们在用table表格的时候,很多时候会有很多条数据,但是浏览者在打开的时候很多的时候所使用的设备不同,导致浏览者不能很好的观看页面,这个时候就需要响应式表格,就可以只动表格网页的其他内容不跟着一起动。

        看代码:

        这都是一些基本样式。

                

 

 给表格基本设置样式

        

 重点来了:

               

                 只需要在父元素设置一个overflow:auto,在必要时(也就是在窗口比原本宽度小的时候)才显示滚动条,设置这个在小屏观看时会出现滚动条,但是滑动滚动条不会导致网页也跟着一起动,只有表格动。

效果:

 

        

        

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

活着就是为了樱岛麻衣~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值