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

Beispielerklärung für langsame MySQL-Abfragen und -Protokolle

1. Einleitung Durch Aktivieren des Slow Query Log...

Implementierung eines einfachen Chatroom-Dialogs basierend auf WebSocket

In diesem Artikel finden Sie den spezifischen Cod...

Einige Tipps zum Website-Design

Tatsächlich haben wir in letzter Zeit viel über W...

So deinstallieren Sie MySQL 5.7.19 unter Linux

1. Finden Sie heraus, ob MySQL zuvor installiert ...

Warum ist der Speicherplatz nach dem Löschen von Tabellendaten in MySQL immer noch belegt?

Inhaltsverzeichnis 1. MySQL-Datenstruktur 2. Die ...

Detaillierte Erläuterung der Lösung für das Problem der automatischen Trennung der xshell-Remoteverbindung

Lösung für das Problem der automatischen Trennung...

So verwenden Sie den Flat Style zum Gestalten von Websites

Das Wesen einer flachen Website-Struktur liegt in...

Der Vue Axios Interceptor verwendet häufig die wiederholte Stornierung von Anforderungen

Einführung Im vorherigen Artikel wurden die einfa...

Spezifische Verwendungsanweisungen für MySQL-Joins

Inhaltsverzeichnis Join-Syntax: 1. InnerJOIN: (In...

Detaillierte Erklärung, wie man ein Passwort an den SSH/SCP-Befehl im Bash-Skript übergibt

Installieren Sie SSHPASS Für die meisten aktuelle...

Eine kurze Analyse der Übereinstimmungspriorität des Nginx-Konfigurationsspeicherorts

Vorwort Der Speicherort im Serverblock in der Ngi...

Implementierungscode für die Verwendung von „Select“ zum Auswählen von Elementen in Vue+Openlayer

Effektbild: Implementierungscode: <Vorlage>...

So stellen Sie MongoDB-Container mit Docker bereit

Inhaltsverzeichnis Was ist Docker einsetzen 1. Zi...

Implementierungsbeispiel für die Nginx-Zugriffskontrolle

Über Nginx, eine leistungsstarke, leichte Webserv...

Tutorial zur Installation und Konfiguration der kostenlosen Installationsversion von MySQL 5.7.20\5.7.21

Laden Sie MySQL 5.7.20 / 5.7.21 herunter, install...