HTML-Code für feste Titelspalte und spezifische Implementierungscode für die Titelkopftabelle

HTML-Code für feste Titelspalte und spezifische Implementierungscode für die Titelkopftabelle


Code kopieren
Der Code lautet wie folgt:

<!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">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312" />
<title>Feste Titelspalte, Titelkopftabelle</title>
<Stil>
Tabelle {border-collapse:collapse;border-spacing:0px; Breite:100%; Rahmen:#000 durchgezogen 0px;}
Tabelle td{border:1px solid #000;height:25px; text-align:center; border-left:0px;}
Tabelle th{ Hintergrund:#edd3d4; Farbe:#a10333; Rahmen:#000 durchgehend 1px; Leerraum:nowrap; Höhe:21px; Rahmen oben:0px;Rahmen links:0px;}
.t_left{Breite:30%; Höhe:auto; Float:links;Rahmen oben:1px durchgezogen #000;Rahmen links:1px durchgezogen #000;}
/*Der Höhenunterschied zwischen t_r_content und cl_freeze beträgt 20px. Die Höhe ist die Anzeigehöhe des Erscheinungsbilds und kann je nach Situation angepasst werden*/
.t_r_content{Breite:100%; Höhe:220px; Hintergrund:#fff; Überlauf:auto;}
.cl_freeze{Höhe:200px;Überlauf:versteckt; Breite:100%;}
/* width passt die Breite der linken Titelspalte an (die Anzeigebreite des linken Erscheinungsbilds); die Angabe width:auto führt unter Opera zu Anzeigeproblemen; height ist 20px kleiner als die Höhe von t_r_content*/
/* width ist die Breite der rechten Anzeige. Die tatsächliche Anzeigebreite ist die Breite von „t_r“ plus die Breite von „cl_freeze“*/
/* Wenn die Anzeige nicht normal ist, passen Sie die Breite von t_r so an, dass die Summe seiner Breite und t_left kleiner als 100 % ist. Wenn sie 100 % beträgt, treten Probleme auf*/
.t_r{Breite:69,5 %; Höhe:auto; Float:links;Rahmen oben:1px durchgezogen #000; Rahmen rechts:#000 durchgezogen 1px;}
.t_r Tabelle {Breite: 1700px;}
.t_r_title{width:1720px;}/*Die Breite ist 20px größer als die t_r-Tabelle (mindestens 20px größer, wenn sie kleiner ist, rutscht die Bildlaufleiste nach rechts und die Anzeige wird problematisch)*/
.t_r_t{Breite:100%; Überlauf:versteckt;}
.bordertop{ border-top:0px;}
</Stil>
<Skript>
Funktion 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;
}
</Skript>
</Kopf>
<Text>
<div Stil="Breite:100%">
<div Klasse="t_left">
<div Stil="Breite:100%;">
<Tabelle>
<tr>
<th style="width:40%">Konto</th>
<th style="width:60%">Name</th>
</tr>
</Tabelle>
</div>
<div Klasse="cl_freeze" id="cl_freeze">
<Tabelle>
<tr>
<td style="width:40%" class="bordertop">1</td>
<td Stil="width:60%" Klasse="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>
</Tabelle>
</div>
</div>
<div Klasse="t_r">
<div Klasse="t_r_t" id="t_r_t">
<div Klasse="t_r_title">
<Tabelle>
<tr>
<th width="10%">Feld A</th>
<th width="20%">Feld B</th>
<th width="10%">Feld C</th>
<th width="20%">Feld D</th>
<th width="20%">Feld E</th>
<th width="20%">Feld F</th>
</tr>
</Tabelle>
</div>
</div>
<div Klasse="t_r_content" id="t_r_content" onscroll="aa()">
<Tabelle>
<tr>
<td Breite="10%" Klasse="bordertop">1</td>
<td Breite="20%" Klasse="bordertop">1</td>
<td Breite="10%" Klasse="bordertop">1</td>
<td Breite="20%" Klasse="bordertop">1</td>
<td Breite="20%" Klasse="bordertop">1</td>
<td Breite="20%" Klasse="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>
</Tabelle>
</div>
</div> </div>
</body>
</html>

<<:  Analysieren Sie die Prinzipien der Tomcat-Architektur für den Architekturentwurf

>>:  Zabbix überwacht die MySQL-Instanzmethode

Artikel empfehlen

Beispielcode zur Implementierung eines einfachen ListViews-Effekts in HTML

HTML zum Erreichen eines einfachen ListViews-Effe...

Detaillierte Erläuterung des Prozesses zum Bereitstellen von MySql auf dem Centos-Server und zum Herstellen einer Verbindung mit Navicat

(1) Serverkonfiguration: [root@localhost ~]# cd /...

MySql-Index verbessert die Abfragegeschwindigkeit allgemeine Methoden Codebeispiele

Verwenden Sie Indizes, um Abfragen zu beschleunig...

Best Practices-Handbuch für partitionierte MySQL-Tabellen

Vorwort: Partitionierung ist ein Tabellenentwurfs...

Hinweise zur Verwendung der verknüpften Liste des Linux-Kernel-Gerätetreibers

/******************** * Anwendung von verknüpften...

Zusammenfassung der Merkmale des SQL-Modus in MySQL

Vorwort Der SQL-Modus wirkt sich auf die von MySQ...

Analyse der Benutzererfahrung beim Design von Facebook-Dating-Websites

<br />Verwandter Artikel: Analyse der Inform...

Fallstricke bei der Installation des komprimierten MySQL 8.0.18-Pakets und beim Zurücksetzen vergessener Passwörter

http://www.cppcns.com/shujuku/mysql/283231.html S...

MySql 8.0.11-Winxp64 (kostenlose Installationsversion) Konfigurations-Tutorial

1. Entpacken Sie das Zip-Paket in das Installatio...

Eine kurze Diskussion über die Ausführungsreihenfolge von JavaScript-Makrotasks und Mikrotasks

Inhaltsverzeichnis 1. JavaScript ist Single-Threa...

Mehrere Möglichkeiten, das Problem des Schwebens zu lösen, das dazu führt, dass die Höhe des übergeordneten Elements in CSS zusammenbricht

1. Dokumentenfluss und Floating 1. Was ist Dokume...

Detailliertes Tutorial zur Installation von mysql-8.0.13 (ZIP-Installation) auf einem Windows 10-System

Beschreibung der Installationsumgebung •Systemver...

getdata Tabelle Tabellendaten Join MySQL-Methode

öffentliche Funktion json_product_list($where, $o...

Beispielcode zur Implementierung eines 3D-Rotationseffekts mit reinem CSS

Verwenden Sie hauptsächlich die Eigenschaften „pr...

Eine kurze Erläuterung der Concat-Funktion in MySQL. So fügen Sie in MySQL vor oder nach einem Feld eine Zeichenfolge hinzu

So verwenden Sie die Concat-Funktion in MySQL: CO...