• bootstrap中固定table的表头


    前端时间鼓捣的一个简单的手机站点,今天又拿出来弄一弄

    由于主要是给手机訪问。用的是bootstrap响应式布局,今天的任务是做一个数据展示页面

    可是因为数据的列比較多。所以横向显示不下,为了较好的显示,将table包裹在了一个.table-responsive元素里

    那么在较小的视口(viewport)时,则能够通过滑动来查看整条数据,从而能保证总体页面的协调性。

    刚才说了,数据列比較多,且第一列是后面数据的全部者,那么观察者在看数据的时候肯定是要相应着数据全部者来看的。那么问题来了

    若是滑动到后面。那么非常easy忘记本条的全部者,那是相当不方便的!比方我们在看NBA比赛数据的时候,有非常多项统计(也就是非常多列)



    第一列显示的是名字。那么随着我们往后滑动。会出现这种结果:




    这样我们根本不知道数据相应的人是谁!哎~怎么办呢?

    一般的方法都是将“全部者”一列固定下来,滑动时仅滑动后面的列。

    只是之前用这个功能都是在前端框架中封装好了的,比方easyUI中有frozen columns,可是在bootstrap中倒是没用过(它本身也没提供这个)

    那么自己写一个吧~也没什么思路,之后最终想到一种“非主流”一点的方法:用2个table

    左边的table用来显示固定信息。而右边的table用来滑动看数据

    实现起来比較简单,将几个要点:

    1、使用float:left来将2个table排列到一行上,可是两者和起来的width不能超过总width

    2、注意2个table单元格的对齐

    最后实现的效果例如以下:




  • 相关阅读:
    [LeetCode] Next Greater Element I
    [LeetCode] Fizz Buzz
    [LeetCode] Reverse String
    [LeetCode] Average of Levels in Binary Tree
    [LeetCode] Encode and Decode TinyURL
    推荐一个计算机视觉图书:python计算机视觉编程
    leetcode 9 Palindrome Number 回文数
    ios swift模仿qq登陆界面,xml布局
    leetcode 26 Remove Duplicates from Sorted Array
    leetcode 88 Merge Sorted Array
  • 原文地址:https://www.cnblogs.com/lytwajue/p/6880181.html
Copyright © 2020-2023  润新知