中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

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

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

名單

代碼如下:

<!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>

更多信息請查看網頁制作

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

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號：滇ICP備2023014141號-1 云南省教育廳備案號：云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證：（云）人服證字（2023）第0102001523號
聯(lián)系電話：0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號：hfpxwx
咨詢QQ：1093837350（9:00—18:00）版權所有:易賢網
主站蜘蛛池模板： 石楼县| 兰州市| 二手房| 大姚县| 武鸣县| 哈尔滨市| 清河县| 安溪县| 玛曲县| 获嘉县| 凤山市| 鹿邑县| 南丰县| 焉耆| 寿宁县| 文昌市| 靖边县| 东兴市| 大同市| 焦作市| 县级市| 清流县| 屏东市| 华容县| 卢龙县| 兰西县| 花垣县| 安塞县| 布尔津县| 黄骅市| 肥东县| 公安县| 广水市| 天全县| 元朗区| 金阳县| 上虞市| 吐鲁番市| 万载县| 宜阳县| 广南县|