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

Die letzten zwei Jahre mit User Experience

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

Die letzten zwei Jahre mit User Experience

Eine kurze Einführung in Linux-Umgebungsvariablendateien

Detailliertes Tutorial zur Installation von Docker und Nvidia-Docker unter Ubuntu 16.04

So verwenden Sie vue-cli, um ein Projekt zu erstellen und es mit webpack zu verpacken

Detaillierte Erläuterung der Idee, mit CSS-Animation den Punkteeffekt zu erzielen

svg+css oder js zum Erstellen eines Tick-Animationseffekts

Analyse und Lösung des abnormalen Problems beim Laden von JAR in Tomcat

Beispielcode zum Testen einer Technologieanwendung basierend auf Docker+Selenium Grid

Docker-Bereitstellung von Kafka und Spring Kafka-Implementierung

So schreiben Sie mit nodejs ein Tool zur Generierung von Entitätsklassen für Datentabellen für C#

Artikel empfehlen

MySQL 8.0.21-Installationstutorial unter Windows-System (Abbildung und Text)

CentOS 7 SSHD ändern | Root-Login und SSHD-Port-Skriptdefinition verbieten

Typora-Codeblock-Farbabgleich und Implementierungscode für die Titelseriennummer

Detaillierte Erklärung zur Verwendung der Vue h-Funktion

Geben Sie zwei Zahlen in HTML ein, um Additions-, Subtraktions-, Multiplikations- und Divisionsfunktionen zu realisieren

Häufige Ursachen und Lösungen für langsame MySQL-SQL-Anweisungen

MySQL 8.0.18 fügt Benutzer zur Datenbank hinzu und erteilt Berechtigungen

MySQL-Variablenprinzipien und Anwendungsbeispiele

Detaillierte Erklärung zu MySQL und Springs Autocommit

MySQL kontrolliert die Anzahl der Versuche, falsche Passwörter einzugeben

Was sind die Unterschiede zwischen var let const in JavaScript

Korrekte Änderungsschritte für das Standardnetzwerksegment von Docker

Einführung in die Rolle des HTML-Doctypes

Eine kurze Diskussion zum Implementierungsprinzip des Vue-Slots

Nginx-Inhaltscache und allgemeine Parameterkonfigurationsdetails