css js簡單實現table固定首行首列

2021-08-04 15:57:02 字數 1722 閱讀 7988

使用easyui等都可以實現table固定首行首列的功能。

但僅僅只需要這乙個功能,完全可以用css+js簡單實現而不用引入更多工具。

網上找到很多的思路,自己對其中比較簡單的乙個進行了整理。

如上圖:

1、整個頁面分成 左右 兩部分:

2、左邊分為 上下 兩部分

3、右邊分為 上下 兩部分(紅色框比較特殊,多加乙個div為了防止列的偏移)

1、html:(省略tr、td)

id="left_div">

id="left_div1">

id="left_table1">

table>

div>

id="left_div2">

id="left_table2">

table>

div>

div>

id="right_div">

id="right_div1">

id="right_divx">

id="right_table1">

table>

div>

div>

id="right_div2">

id="right_table2">

table>

div>

div>2、css:

(1)left_div與right_div 使用左浮動

(2)上圖藍色div框,寬度可以都使用100%,跟隨左右大的div(left_div與right_div)

(3)left_div2 及 right_div1 需要加上overflow: hidden

(4)防止列錯位:right_divx(上圖紅色div框)的寬度需要大於right_table1及right_table2,20px

(5)防止行錯位:left_div2 高度大於right_div2 高度,20px

td#left_div

#left_div1

#left_div2

#right_div

#right_div1

#right_divx

#right_div2

#right_table1

#right_table2

3、js:

思路:

1、左下div(left_div2) 隨著 右下div(right_div2) 上下移動

2、右上div(right_div1) 隨著 右下div(right_div2) 左右移動

var right_div2 = document.getelementbyid("right_div2");

right_div2.onscroll = function()

CSS JS實現簡單的時鐘

之前在 上看到過別人用幾行css 就實現了乙個簡單的時鐘,感覺挺有趣的,就自己仿照著也實現了一下。感覺裡面用到的知識點都挺適合新手學習的,所以貼出來和大家一起學習學習。下面是實現後的效果圖。實現的原理很簡單,但是裡面也有些需要注意的地方。首先看html結構,整個時鐘包含在乙個div中,在父div中又...

css js簡單應用

趁著週末,有時間也有心情,再次發表個網上已經有過很多例子的js控制左右滾動的 還是那句話,為了大家用之方便也為自己拿之方便。doctype html public w3c dtd html 4.0 transitional en html dir ltr lang it xml lang it xm...

固比固布局 聖杯布局 css實現傳統手機app布局

我們需要實現的是頭部 底部高度固定 中間內容區域自適應且可以滾動 直接貼 css html,body body section header footer p html body header 頭部 header section p 這是可以滾動的 p p 這是可以滾動的 p p 這是可以滾動的 p...