html固定標題列、標題頭table具體實現(xiàn)代碼
來源：易賢網(wǎng) 閱讀：1046 次 日期：2016-06-21 11:29:11
溫馨提示：易賢網(wǎng)小編為您整理了“html固定標題列、標題頭table具體實現(xiàn)代碼”,方便廣大網(wǎng)友查閱！

為了布局的美觀度需要在html中固定標題列、標題頭，本文整理了一些相關實現(xiàn)技巧，經(jīng)測試還不錯，感興趣的朋友可以參考下，希望對你有所幫助

名單

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>固定標題列、標題頭table</title>

<style>

table{border-collapse:collapse;border-spacing:0px; width:100%; border:#000 solid 0px;}

table td{border:1px solid #000;height:25px; text-align:center; border-left:0px;}

table th{ background:#edd3d4; color:#a10333; border:#000 solid 1px; white-space:nowrap; height:21px; border-top:0px;border-left:0px;}

.t_left{width:30%; height:auto; float:left;border-top:1px solid #000;border-left:1px solid #000;}

/*t_r_content和cl_freeze高度相差20px， 高度為外觀顯示高度，可根據(jù)情況調整*/

.t_r_content{width:100%; height:220px; background:#fff; overflow:auto;}

.cl_freeze{height:200px;overflow:hidden; width:100%;}

/* width 調整左邊標題列寬度（左側外觀顯示寬度）; 指定為width:auto 在Opera下顯示有問題; height比 t_r_content 高度小20px*/

/* width 寬度為 右側外觀顯示寬度 實際顯示寬度大小為“t_r”寬度加上“cl_freeze”寬度 */

/* 如果顯示不正常，調整 t_r的width 使其和t_left的width之和小于100%；等于100%時會有問題*/

.t_r{width:69.5%; height:auto; float:left;border-top:1px solid #000; border-right:#000 solid 1px;}

.t_r table{width:1700px;}

.t_r_title{width:1720px;}/*寬度比 t_r table 大20px （至少大20，小了滾動條滑到右側顯示有問題）*/

.t_r_t{width:100%; overflow:hidden;}

.bordertop{ border-top:0px;}

</style>

<script>

function aa(){

var a=document.getElementById("t_r_content").scrollTop;

var b=document.getElementById("t_r_content").scrollLeft;

document.getElementById("cl_freeze").scrollTop=a;

document.getElementById("t_r_t").scrollLeft=b;

}

</script>

</head>

<body>

<div style="width:100%">

<div class="t_left">

<div style="width:100%;">

<table>

<tr>

<th style="width:40%">賬號</th>

<th style="width:60%">姓名</th>

</tr>

</table>

</div>

<div class="cl_freeze" id="cl_freeze">

<table>

<tr>

<td style="width:40%" class="bordertop">1</td>

<td style="width:60%" class="bordertop">1</td>

</tr>

<tr>

<td>2</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>3</td>

</tr>

<tr>

<td>4</td>

<td>4</td>

</tr>

<tr>

<td>5</td>

<td>5</td>

</tr>

<tr>

<td>6</td>

<td>6</td>

</tr>

<tr>

<td>7</td>

<td>7</td>

</tr>

<tr>

<td>8</td>

<td>8</td>

</tr>

<tr>

<td>9</td>

<td>9</td>

</tr>

<tr>

<td>10</td>

<td>10</td>

</tr>

<tr>

<td>11</td>

<td>11</td>

</tr>

<tr>

<td>12</td>

<td>12</td>

</tr>

<tr>

<td>13</td>

<td>13</td>

</tr>

<tr>

<td>14</td>

<td>14</td>

</tr>

<tr>

<td>15</td>

<td>15</td>

</tr>

<tr>

<td>16</td>

<td>16</td>

</tr>

<tr>

<td>17</td>

<td>17</td>

</tr>

<tr>

<td>18</td>

<td>18</td>

</tr>

<tr>

<td>19</td>

<td>19</td>

</tr>

<tr>

<td>20</td>

<td>20</td>

</tr>

</table>

</div>

</div>

<div class="t_r">

<div class="t_r_t" id="t_r_t">

<div class="t_r_title">

<table>

<tr>

<th width="10%">字段A</th>

<th width="20%">字段B</th>

<th width="10%">字段C</th>

<th width="20%">字段D</th>

<th width="20%">字段E</th>

<th width="20%">字段F</th>

</tr>

</table>

</div>

</div>

<div class="t_r_content" id="t_r_content" onscroll="aa()">

<table>

<tr>

<td width="10%" class="bordertop">1</td>

<td width="20%" class="bordertop">1</td>

<td width="10%" class="bordertop">1</td>

<td width="20%" class="bordertop">1</td>

<td width="20%" class="bordertop">1</td>

<td width="20%" class="bordertop">1</td>

</tr>

<tr>

<td>2</td>

<td>2</td>

<td>2</td>

<td>2</td>

<td>2</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>3</td>

<td>3</td>

<td>3</td>

<td>3</td>

<td>3</td>

</tr>

<tr>

<td>4</td>

<td>4</td>

<td>4</td>

<td>4</td>

<td>4</td>

<td>4</td>

</tr>

<tr>

<td>5</td>

<td>5</td>

<td>5</td>

<td>5</td>

<td>5</td>

<td>5</td>

</tr>

<tr>

<td>6</td>

<td>6</td>

<td>6</td>

<td>6</td>

<td>6</td>

<td>6</td>

</tr>

<tr>

<td>7</td>

<td>7</td>

<td>7</td>

<td>7</td>

<td>7</td>

<td>7</td>

</tr>

<tr>

<td>8</td>

<td>8</td>

<td>8</td>

<td>8</td>

<td>8</td>

<td>8</td>

</tr>

<tr>

<td>9</td>

<td>9</td>

<td>9</td>

<td>9</td>

<td>9</td>

<td>9</td>

</tr>

<tr>

<td>10</td>

<td>10</td>

<td>10</td>

<td>10</td>

<td>10</td>

<td>10</td>

</tr>

<tr>

<td>11</td>

<td>11</td>

<td>11</td>

<td>11</td>

<td>11</td>

<td>11</td>

</tr>

<tr>

<td>12</td>

<td>12</td>

<td>12</td>

<td>12</td>

<td>12</td>

<td>12</td>

</tr>

<tr>

<td>13</td>

<td>13</td>

<td>13</td>

<td>13</td>

<td>13</td>

<td>13</td>

</tr>

<tr>

<td>14</td>

<td>14</td>

<td>14</td>

<td>14</td>

<td>14</td>

<td>14</td>

</tr>

<tr>

<td>15</td>

<td>15</td>

<td>15</td>

<td>15</td>

<td>15</td>

<td>15</td>

</tr>

<tr>

<td>16</td>

<td>16</td>

<td>16</td>

<td>16</td>

<td>16</td>

<td>16</td>

</tr>

<tr>

<td>17</td>

<td>17</td>

<td>17</td>

<td>17</td>

<td>17</td>

<td>17</td>

</tr>

<tr>

<td>18</td>

<td>18</td>

<td>18</td>

<td>18</td>

<td>18</td>

<td>18</td>

</tr>

<tr>

<td>19</td>

<td>19</td>

<td>19</td>

<td>19</td>

<td>19</td>

<td>19</td>

</tr>

<tr>

<td>20</td>

<td>20</td>

<td>20</td>

<td>20</td>

<td>20</td>

<td>20</td>

</tr>

</table>

</div>

</div> </div>

</body>

</html>

更多信息請查看網(wǎng)頁制作
易賢網(wǎng)手機網(wǎng)站地址：html固定標題列、標題頭table具體實現(xiàn)代碼
由于各方面情況的不斷調整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復僅供參考，敬請考生以權威部門公布的正式信息和咨詢?yōu)闇剩?/div>

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號：滇ICP備2023014141號-1 云南省教育廳備案號：云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務許可證：（云）人服證字（2023）第0102001523號
聯(lián)系電話：0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號：hfpxwx
咨詢QQ：526150442（9:00—18:00）版權所有:易賢網(wǎng)