溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

固定table表頭

發(fā)布時(shí)間：2020-07-17 03:22:06 來(lái)源：網(wǎng)絡(luò) 閱讀：505 作者：laiwenhuajava 欄目：開(kāi)發(fā)技術(shù)

項(xiàng)目中設(shè)計(jì)的報(bào)表table設(shè)計(jì)的列數(shù)相對(duì)過(guò)多，當(dāng)拖動(dòng)下方的滾動(dòng)條時(shí)無(wú)法對(duì)應(yīng)表頭所對(duì)應(yīng)的列，因此在網(wǎng)上搜索了好一段日子，最后在網(wǎng)上找到了一些參考資料，然后總結(jié)歸納出兼容行列合并的固定表頭demo。

多瀏覽器沒(méi)有做太多測(cè)試，但是在ie9、火狐、360瀏覽器中已測(cè)試通過(guò)。 




<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>固定table表頭</title>


<style type="text/css">

.div1All{

position: absolute; 

left: 0px; 

right: 0px; 

top: 0px; 

bottom: 0px

}

.divHeaderID{

margin-right: auto; 

margin-left: auto; 

overflow: hidden;

bgcolor: blue;

}

.divContentID{

position: absolute; 

left: 0px; 

top: 30.5px; 

bottom: 0px; 

right: 0px; 

overflow: scroll

}

</style>


</head>

<body>

<div class="div1All">

<div class="divHeaderID">

<table border="1" cellspacing="0">

<Tr >

<Th width="100px">Header A</Th>

<Th width="100px">Header B</Th>

<Th width="100px">Header C</Th>

<Th width="100px">Header D</Th>

<Th width="100px">Header E</Th>

<Th width="100px">Header F</Th>

</Tr>

</table>

</div>

<div class="divContentID">

<table border="1" cellspacing="0" >

<c:forEach begin="1" end="100" varStatus="index"> 

<Tr>

<Td width="100px">${index.index}</Td>

<Td width="100px">B</Td>

<Td width="100px">C</Td>

<Td width="100px">D</Td>

<Td width="100px">E</Td>

<Td width="100px">F</Td>

</Tr> 

</c:forEach>

</table>

</div>

</div>

</body>

</html> 


向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手