HTML 固定タイトル列、タイトルヘッダーテーブル固有の実装コード

コードをコピー

コードは次のとおりです。

<!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">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312" />
<title>固定タイトル列、タイトルヘッダーテーブル</title>
<スタイル>
テーブル{border-collapse:collapse;border-spacing:0px; width:100%; border:#000 solid 0px;}
テーブル td{border:1px solid #000;height:25px; text-align:center; border-left:0px;}
テーブル th{ 背景:#edd3d4; 色:#a10333; 境界線:#000 実線 1px; 空白:nowrap; 高さ:21px; 上部境界線:0px; 左境界線:0px;}
.t_left{幅:30%; 高さ:自動; フロート:左; 上境界線:1px 実線 #000; 左境界線:1px 実線 #000;}
/*t_r_contentとcl_freezeの高さの差は20pxです。高さは見た目の表示高さであり、状況に応じて調整できます*/
.t_r_content{幅:100%; 高さ:220px; 背景:#fff; オーバーフロー:自動;}
.cl_freeze{高さ:200px;オーバーフロー:非表示;幅:100%;}
/* width は左のタイトル列の幅 (左の表示幅) を調整します。width:auto を指定すると、Opera で表示上の問題が発生します。height は t_r_content の高さより 20px 小さくなります。*/
/* 幅は右側のディスプレイの幅です。実際のディスプレイ幅は「t_r」の幅と「cl_freeze」の幅を加えたものです*/
/* 表示が異常な場合は、t_r の幅を調整して、その幅と t_left の合計が 100% 未満になるようにします。100% に等しいと問題が発生します */
.t_r{幅:69.5%; 高さ:自動; フロート:左; ボーダー上部:1px 実線 #000; ボーダー右:#000 実線 1px;}
.t_r テーブル{幅:1700px;}
.t_r_title{width:1720px;}/*幅はt_rテーブルより20px大きいです（少なくとも20px大きいです。小さいとスクロールバーが右にスライドし、表示に問題が生じます）*/
.t_r_t{幅:100%; オーバーフロー:非表示;}
.bordertop{ border-top:0px;}
</スタイル>
<スクリプト>
関数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;
}
</スクリプト>
</head>
<本文>
<div スタイル="width:100%">
<div class="t_left">
<div style="width:100%;">
<テーブル>
<tr>
<th style="width:40%">アカウント</th>
<th style="width:60%">名前</th>
</tr>
</テーブル>
</div>
<div class="cl_freeze" id="cl_freeze">
<テーブル>
<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>
</テーブル>
</div>
</div>
<div class="t_r">
<div class="t_r_t" id="t_r_t">
<div class="t_r_title">
<テーブル>
<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>
</テーブル>
</div>
</div>
<div class="t_r_content" id="t_r_content" onscroll="aa()">
<テーブル>
<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>
</テーブル>
</div>
</div> </div>
</本文>
</html>

<<: 異なるブラウザ間で互換性のあるテキスト配置を実現する CSS

>>: Zabbix は MySQL インスタンスメソッドを監視します