在前端的開發過程中，**時經常使用的一種展現形式。在我的開發過程中，當資料過多時，最常用的一種方式就是分頁，但是有些地方還是需要滾動。通常的table 會隨著滾動，導致表頭看不見。一下是我找到的一種固定表頭的方法。**如下：
div class="t_head"><
table
class
="table_style"
>
<
caption
class
="tabletitle statelegend"
>
<
span
class
="epgdate l"
v-html
="epgdate"
>
span
>
<
span
class
="l"
>頻道列表
span
>
<
ul>
<
li v-for
="(item,index) in programtype"
:key
="index"
@click
="screenchannellist(item)"
>
<
span
class
="legend"
>
span
>
<
span
class
="legendname"
> }
span
>
li>
ul>
caption
>
<
thead
>
<
tr>
<
th width
="30%"
>編號
th>
<
th width
="30%"
>名稱
th>
<
th width
="30%"
>出現位置
th>
<
th width
="10%"
>操作
th>
<
th>
th>
tr>
thead
>
table
>
div>
<
div
class
="t_body scroll_live"
v-if
="ischannel"
>
<
table
class
="table_style"
>
<
tbody
>
<
tr v-for
="(channel,index) in liveepglist"
:key
="index"
@click
="getlookbackepglist(channel.channelid,channel.channelname);"
class
="trhover"
:class
="[index%2 ? 'trlight' : 'trdark',,,, ]"
>
<
td width
="30%"
:title
="channel.channelid"
>}
td>
<
td width
="30%"
:title
="channel.channelname"
>}
td>
<
td width
="30%"
:title
="channel.location ==2?'隱藏':'可見'"
v-html
="channel.location ==2?'隱藏':'可見'"
>
td>
<
td width
="10%"
><
div
class
="deal"
@click.stop
="dealchannelabnormal(channel)"
>處理
div>
td>
tr>
tbody
>
table
>
div>
.t_head .t_body
table固定表頭
html中table樣式固定表頭，下面的內容滾動 html 終端sn號 會員名稱 會員 繫結狀態 啟用狀態 入庫時間 終端sn號 會員名稱 會員 繫結狀態 啟用狀態 入庫時間 終端sn號 會員名稱 會員 繫結狀態 啟用狀態 入庫時間 終端sn號 會員名稱 會員 繫結狀態 啟用狀態 入庫時間 終端sn...
固定table的表頭
原貼 另可參考 根據固定表頭的兩種方式 固定表頭兩種方式 1.表頭和表內容分別在兩個table中,互不干擾.優點 實現簡單 缺點 兩個table 的列寬不好保持一致,缺乏靈活性 2.用標籤的屬性來處理 html view plain copy span style font size 18px ht...
table表頭固定問題
table表頭固定問題 原生的table表頭在 滾動時候無法固定，可以使用以下的方法進行模擬 1.雙table法 表頭和表體各用乙個table，這樣會產生 列對不齊的問題，可以使用colgroup和col來對齊，或者直接設定th，td的寬度 2.單table修改樣式方法 設定 體為display b...