對(duì)于table的一些基礎(chǔ)信息不了解的,可以參考我以前寫(xiě)過(guò)的一篇《關(guān)于table的一些記錄》。下面演示的代碼,具體的源碼可以參考此處。
一、表格固定左邊與頂部
公司最近要做個(gè)排期系統(tǒng),當(dāng)滾動(dòng)表格的時(shí)候,需要將頂部和左邊的分別固定起來(lái)。
1)固定頂部
原理就是用標(biāo)簽?zāi)M出頂部的樣式,通過(guò)腳本計(jì)算出高度,以及各個(gè)塊的寬度,再將table中的thead的內(nèi)容覆蓋掉。
1. 樣式:通過(guò)絕對(duì)定位,將ul中的內(nèi)容覆蓋中頂部。
<ul class="calendar-table-top-header"> <li></li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li></ul>
延伸閱讀
學(xué)習(xí)是年輕人改變自己的最好方式