CSS zum Erreichen der ersten Zeile und ersten Spalte der Tabelle, fester und adaptiver Fensterbeispielcode

CSS zum Erreichen der ersten Zeile und ersten Spalte der Tabelle, fester und adaptiver Fensterbeispielcode

Der heutige schriftliche Campus-Rekrutierungstest erfordert die Implementierung einer festen ersten Zeile und ersten Spalte, wobei sich die Breite an Fensteränderungen anpasst, das Fenster jedoch nicht auf eine bestimmte Breite reduziert werden kann und eine horizontale Bildlaufleiste angezeigt wird ...
Ich habe es damals falsch geschrieben und mir ist keine Möglichkeit eingefallen, die erste Zeile und die erste Spalte zu korrigieren, die absolute Positionierung und die relative Positionierung des Vaters zu verwenden ... Dadurch würden viele Probleme gelöst ...
Also bin ich zurückgekommen und habe es studiert. Diese Eigenschaften habe ich in den vorherigen Tutorials nicht gelernt. Ich habe viel gelernt, haha ​​…

Verstehen Sie zunächst einige Konzepte:

Tabellenlayout:

Die Eigenschaft „table-layout“ hat zwei spezifische Werte:
auto (Standard) - die Gesamtbreite der Tabelle bestimmt den Maximalwert jeder Zelle
fest - Die Gesamtbreite der Tabelle wird durch die Definition der Tabellenbreite und die Definition der Breite jeder Spalte bestimmt. Wenn die Breite nicht definiert ist, wird die Tabellenbreite gleichmäßig aufgeteilt.
Die Tabellenbreite wird durch die Tabellenbreite festgelegt. Die Breite einer Spalte wird nur durch die Zellen in der ersten Zeile der Spalte bestimmt. Die Breite der Zellen in anderen Zeilen hat keinen Einfluss auf die Breite der gesamten Spalte.
Hinweis: Die benutzerdefinierte Breite muss in der ersten Zelle definiert werden, um wirksam zu sein (th).

Position: klebrig

Die Sticky-Positionierung kann als eine Mischung aus relativer und fester Positionierung betrachtet werden. Elemente werden relativ positioniert, bis sie einen bestimmten Schwellenwert überschreiten. Danach werden sie fixiert.
Wenn es im Zielbereich sichtbar ist, verhält es sich wie relativ und es gibt keine Änderung. Wenn die Seite über den Zielbereich hinaus scrollt, ändert sich ihr Verhalten zu fest und es wird an der Zielposition fixiert.
Ein Sticky-Element wird mit einem „ Scroll-Mechanismus “ am nächsten Vorgänger „fixiert“ (wenn der Überlauf des Vorgängers ausgeblendet, scrollend, automatisch oder überlagert ist), selbst wenn der Vorgänger nicht der nächste wirklich scrollbare Vorgänger ist.
Es ist zu beachten, dass wenn position: sticky auf table angewendet wird, es nur auf th und td funktioniert und keine Auswirkung auf tr hat. Außerdem muss die Zielposition links/rechts/oben/unten definiert sein, damit der Fixeffekt erscheint!

erreichen:

1. Adaptiv <br /> Die Tabelle wird in ein div mit einer Breite von 100 % eingebettet und bei Überlauf wird eine Bildlaufleiste angezeigt.

.Kasten {
      Breite: 100 %;
      Höhe: 200px;
      Hintergrundfarbe: #eee;
      Überlauf: automatisch;
       Rand: 10px;
    }

Tabelle, Breite 100%, Mindestbreite festlegen, ich habe sie hier auf 1000px eingestellt, dies hängt von persönlichen Einstellungen ab

Tisch {
      Breite: 100 %;
      Mindestbreite: 1000px;
       /* Die benutzerdefinierte Breite sollte auf fest eingestellt werden */
      Tabellenlayout: behoben;
      /* Zellenabstand festlegen */
      Rahmenabstand: 0;
    }

2. Um die erste Zeile und die erste Spalte zu fixieren, müssen Sie für die erste Zeile und die erste Spalte eine klebrige Positionierung festlegen.
Einstellungen der ersten Zeile

thead tr th {
      /* th legt die Sticky-Positionierung fest */
      Hintergrundfarbe: rosa;
      Position: klebrig;
      oben: 0;
        /* oberer Rand */
        Rahmen oben: 1px tief schwarz;
    }

Einstellungen für die erste Spalte

 td:erstes-Kind {
      /* td erste Sticky-Positionierung */
      Position: klebrig;
      links: 0;
      Hintergrundfarbe: himmelblau;
    }

Wenn Sie die Zellenbreite ändern möchten, müssen Sie table-layout: fixed festlegen.
Diese Eigenschaft legt die Standardzelle fest, um die Tabellenbreite gleichmäßig zu teilen. Wenn die erste Zelle (th) der ersten Spalte auf eine feste Breite von 200 Pixel eingestellt ist, beträgt die Breite dieser Spalte 200 Pixel.
Beachten Sie, dass es sich um die erste Zelle handelt

td:erstes-Kind,th:erstes-Kind {
         /* Setze die erste Spalte auf 200. Das Setzen von th ist wirksam. Das Hinzufügen von td dient hier hauptsächlich zum Setzen von Border*/
         Breite: 200px;
         Rahmen links: 1px tief schwarz;
    }

Ein weiterer Punkt, den Sie beachten sollten, ist der Rahmen. Sie müssen den Rahmen jeder Zelle einzeln festlegen. Wenn der Rahmen zusammenfällt, folgt das Scrollen, was nicht gut aussieht.

Gesamtcode:

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Dokument</title>
  <Stil>
    * {
      Polsterung: 0;
      Rand: 0;
    }

    .Kasten {
      Breite: 100 %;
      Höhe: 200px;
      Hintergrundfarbe: #eee;
      Überlauf: automatisch;
      Rand: 10px;
    }
    Tisch {
      Breite: 100 %;
      Mindestbreite: 1000px;
       /* Die benutzerdefinierte Breite sollte auf fest eingestellt werden */
      Tabellenlayout: behoben;
      /* Zellenabstand festlegen */
      Rahmenabstand: 0;
    }
    
    td,th {
      Rahmen unten: 1px tief schwarz;
      Rahmen rechts: 1px tief schwarz;
      Box-Größe: Rahmenbox;
      /* Anzeigen, wenn die Länge überschreitet ... */
      Leerzeichen: Nowrap;
      Überlauf: versteckt;
      Textüberlauf: Auslassungspunkte;
    }

    td:erstes-Kind,th:erstes-Kind {
         /* Setze die erste Spalte auf 200, diese Einstellung ist wirksam*/
         Breite: 200px;
         Rahmen links: 1px tief schwarz;
    }
    /* Wenn der Rahmen zusammenfällt, wird gescrollt. Legen Sie daher den Rahmen für jedes Element separat fest. */
    td:letztes-Kind, th:letztes-Kind {
      Rahmen rechts: 1px tief schwarz;
    }
    th:letztes-Kind, td:letztes-Kind {
      Rahmen rechts: 1px tief schwarz;
    }
    .letztes td {
      /* Unterer Rand der letzten Zeile */
      Rahmen unten: 1px tief schwarz;
    }
    
    thead tr th {
      /* th legt die Sticky-Positionierung fest */
      Hintergrundfarbe: rosa;
      Position: klebrig;
      oben: 0;
        /* oberer Rand */
        Rahmen oben: 1px tief schwarz;
    }
   
    td:erstes-Kind {
      /* td erste Sticky-Positionierung */
      Position: klebrig;
      links: 0;
      Hintergrundfarbe: himmelblau;
    }
    thead tr th:erstes-Kind {
      /* Das erste wird ganz oben gesetzt, um sicherzustellen, dass es nicht durch das Scrollen nach oben und unten sowie nach links und rechts verdeckt wird*/
      Z-Index: 1;
      links: 0;
    }
  </Stil>
</Kopf>


<Text>
  <div Klasse="Box">
  <Tabelle>
    <Kopf>
      <tr>
      <th>Name</th>
      <th>Matrikelnummer</th>
      <th>Alter</th>
      <th>Ergebnisse</th>
      <th>Hobbys</th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cola11111111111111111111111111111111111111111111111111111</td>
        <td>Cola11111111</td>
        <td>Cola 222222222</td>
        <td>Cola 333333333333333333333333333</td>
        <td>Cola</td>
      </tr>
      <tr>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
      </tr>
      <tr>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
      </tr>
      <tr>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
      </tr>
      <tr>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
      </tr>
      <tr>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
      </tr>
      <tr>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
      </tr>
      <tr>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
      </tr>
      <tr>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
      </tr>
      <tr>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
      </tr>
      <tr>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
      </tr>
      <tr>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
      </tr>
      <tr Klasse="letzte">
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
        <td>Cola</td>
      </tr>
    </tbody>
  </Tabelle>
</div>
</body>
</html>

Wirkung: (Noch nicht sehr gut, arbeite weiter daran)

Bildbeschreibung hier einfügen

Damit ist dieser Artikel über die Verwendung von CSS zum Korrigieren der ersten Zeile und der ersten Spalte einer Tabelle und die Implementierung adaptiver Fensterbeispiele abgeschlossen. Weitere Informationen zur Verwendung von CSS zum Korrigieren der ersten Zeile und der ersten Spalte einer Tabelle finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  MySQL-Datenbank-Grundlagen SQL-Fensterfunktion Beispielanalyse-Tutorial

>>:  Einführung in den Prozess der Verwendung der NFS-Remote-Verzeichnismontage in der CentOS-Umgebung

Artikel empfehlen

Funktionsüberladung in TypeScript

Inhaltsverzeichnis 1. Funktionssignatur 2. Funkti...

Ausführliches Tutorial zur Installation von MySql 5.6.35 winx64

Hinweis: Beim Projektstart ist kein Fehler aufgru...

Detaillierte Erklärung zur Verwendung der vue3 Teleport-Sofortbewegungsfunktion

Die Verwendung der vue3 Teleport-Sofortbewegungsf...

Bei der Installation der Version MySql 8.0.16 wird die Verwendung von „UTF8B4“ anstelle von „UTF8B3“ gefordert.

Bei der Installation in MySQL 8.0.16 können einig...

So verwenden Sie „Explain“, um den SQL-Ausführungsplan in MySql abzufragen

Der Befehl „Explain“ ist die primäre Möglichkeit,...

js implementiert das Popup-Anmeldefeld durch Klicken auf das Popup-Fenster

In diesem Artikel wird der spezifische Code von j...

So implementieren Sie den Vue-Timer

In diesem Artikelbeispiel wird der spezifische Co...

HTML-Code zum Hinzufügen eines Mengenabzeichens zur Nachrichtenschaltfläche

HTML Quelltext: <a onclick="goMessage();&...

25 Vue-Tipps, die Sie kennen müssen

Inhaltsverzeichnis 1. Beschränken Sie Requisiten ...

Typische Fälle von MySQL-Indexfehlern

Inhaltsverzeichnis Typische Fälle Anhang: Häufige...

So überwachen Sie globale Variablen im WeChat-Applet

Ich bin kürzlich bei der Arbeit auf ein Problem g...

Python3.6-MySql Dateipfad einfügen, die Lösung zum Entfernen des Backslashs

Wie unten dargestellt: Ersetzen Sie es einfach, w...

Detaillierte Erläuterung der Nginx-Prozessverwaltungs- und Neuladeprinzipien

Prozessstrukturdiagramm Nginx ist eine Multiproze...

MySQL 8.0.11 Installationstutorial mit Bildern und Text

Es gibt viele Tutorials im Internet und sie sind ...

Detaillierte Schritte zur Installation von MySQL 8.0.27 in Linux 7.6-Binärdateien

Inhaltsverzeichnis 1. Umweltvorbereitung 1.1 Betr...