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

So fügen Sie in 88 Sekunden 10 Millionen Datensätze in eine MySQL-Datenbanktabelle ein

Lösung für das Problem des verweigerten Zugriffs für den Benutzer „root“ @ „localhost“ (mit Kennwort: JA) bei der Anmeldung bei MySQL 8.0 unter Win10

Ich habe vor kurzem angefangen, MySQL zu lernen. ...

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

So fügen Sie in 88 Sekunden 10 Millionen Datensätze in eine MySQL-Datenbanktabelle ein

So ändern Sie die SSH-Portnummer in der Centos8-Umgebung

Detaillierte Erklärung der Lösung für das zu langsame Docker-Compose

Eine detaillierte Einführung in die Neugestaltung der Weibo-Komponente auf der Website (Bilder und Text)

Ein kurzer Vortrag über berechnete Eigenschaften und das Abhören von Eigenschaften in Vue

Zusammenfassung der domänenübergreifenden Problembehandlung und -lösungen von Vue

Zusammenfassung der MySQL-Datenmigration

Detaillierter Prozess der Installation und Bereitstellung von OnlyOffice in Docker

Eine kurze Diskussion über den gesamten Prozess des ersten Renderings von Vue

Fähigkeiten zur Seiten-Refaktorierung – Javascript, CSS

Artikel empfehlen

Objektorientierte Programmierung mit XHTML und CSS

So implementieren Sie die autorisierte WeChat-Anmeldung elegant in einem Vue3-Projekt

js-Methode zum Löschen eines Felds in einem Objekt

Vue implementiert einfache Kommentarfunktion

So verwenden Sie den Befehl sed, um bestimmte Zeilen einer Datei effizient zu löschen

SQL GROUP BY ausführliche Erklärung und einfaches Beispiel

Vue imitiert den Formularbeispielcode von ElementUI

Lösung für das Problem des verweigerten Zugriffs für den Benutzer „root“ @ „localhost“ (mit Kennwort: JA) bei der Anmeldung bei MySQL 8.0 unter Win10

Zusammenfassung der allgemeinen APIs und erweiterten APIs von Vue

Allgemeine MySQL-Anweisungen zum Anzeigen von Transaktionen und Sperren

Detaillierte Erklärung zum Ziehen von Tabellenspalten mit Vue Element Sortablejs

Verwenden von vue3 zum Implementieren eines Beispiels für die Kapselung von Zählfunktionskomponenten

Lösung zum Vergessen des Passworts des Pagodenpanels in Linux 3.X/4.x/5.x

Spezifische Verwendung von CSS-Inhaltsattributen

Wie stellt MySQL die Datenintegrität sicher?