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

Drei Netzwerkmethoden und Prinzipien von virtuellen VMware-Maschinen (Zusammenfassung)

1. Brigde——Bridge: VMnet0 wird standardmäßig verw...

Detaillierte Erklärung der Verwendung von SetUp- und Reactive-Funktionen in Vue3

1. Wann soll setUp ausgeführt werden? Wir alle wi...

Beispiel für die Einrichtung eines mehrspaltigen Layouts gleicher Höhe mit CSS

Mehrere Spalten haben zunächst unterschiedliche I...

CSS-Methode zur Steuerung der Elementhöhe von unten nach oben und von oben nach unten

Beginnen wir die Diskussion mit einer häufig gest...

Beispielcode zur Trennung von Front-End und Back-End mit FastApi+Vue+LayUI

Inhaltsverzeichnis Vorwort Projektdesign hinteres...

Detailliertes Beispiel für MySQL ähnlich dem Schreiben von Oracle Rownum

Rownum ist eine einzigartige Schreibmethode in Or...

Diagramm des Hyperledger Fabric 1.4-Umgebungskonstruktionsprozesses unter Windows 10

InhaltHyperledger Fabric1.4-Umgebungseinrichtung ...

Einführung in Linux-Komprimierungs- und Dekomprimierungsbefehle

Inhaltsverzeichnis Gängige Komprimierungsformate:...

15 JavaScript-Funktionen, die es wert sind, gesammelt zu werden

Inhaltsverzeichnis 1. Zahlen umkehren 2. Holen Si...

Detaillierte Erläuterung der perfekten CSS3+JS-Implementierung des Lupenmodus

Vor etwa einem Jahr habe ich einen Artikel geschr...

Website User Experience Design (UE)

Ich habe gerade einen von JunChen verfassten Beitr...

CSS implementiert 0,5px-Zeilen, um Kompatibilitätsprobleme mit Mobilgeräten zu lösen (empfohlen)

【Inhalt】: 1. Verwenden Sie den Verlaufsstil des H...

Ein ausführliches Tutorial zur Verwendung von Docker zum Erstellen einer vollständigen Entwicklungsumgebung

Einführung in DNMP DNMP (Docker + Nginx + MySQL +...

Bauprozess eines privaten Docker-Lagerhafens

1. Vorbereitung 1.1 Hafen herunterladen Harbor-Do...

So implementieren Sie Seitensprünge in einem Vue-Projekt

Inhaltsverzeichnis 1. Erstellen Sie ein Vue-CLI-S...