bootstrap中固定table的表頭

2021-09-07 11:22:22 字數 1057 閱讀 1269

前端時間鼓搗的乙個簡單的手機站點,今天又拿出來弄一弄

由於主要是給手機訪問。用的是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單元格的對齊

最後實現的效果例如以下:

Python去除字串中固定字元或固定位置字元

在c語言中輸入十六進製制的陣列,如下面的 通常是帶有逗號,以及0x的十六進製制標誌。而在crc計算器中,輸入資料進行識別的時候,應該去掉0x,有的時候還要去掉空格以及英文逗號,所以我們需要去除字串中特定位置的字元。因為上位機是使用python做的,所以引出本文內容 python去除字串中特定衣服或特...

在FLASH中固定位置存入資料

方法二 先在程式中定義乙個const 型別的常量陣列,並指定其儲存位置 方便找到寫入 讀取位置 這樣編譯器就會分配你指定的空間將常量陣列存入flash中。當你做擦除。讀寫操作時,只要在這個常量陣列所在的位址範圍就好。const uint8 t table 10 at 0x08010000 mdk3....

HTML 中固定不動,滾動條

原結構為乙個table 放在乙個 div中,在div設定overflow y 選擇 模板名稱 模板型別 建立時間 引數說明 正常還款 batpro 2016 09 26 aaaaaaaaaa 正常還款 batpro 2016 09 26 aaaaaaaaaa 上變這種結構右側滾筒條在容器div 上,...