Warum scrollt mein Körper nicht?

Überlauf-Scrolling in Tabellenkörpern (tbody) angehen

Bei dem Versuch, die Höhe eines Tbody-Elements festzulegen und gleichzeitig Overflow-Scrolling zu ermöglichen, sind Sie möglicherweise auf das folgende CSS gestoßen Snippet:

tbody {
  height: 50px;
  display: block;
  overflow: scroll;
}

Trotz der Implementierung dieses Stils reagiert das Tbody-Element weiterhin nicht auf Scrollen. Um dieses Problem zu beheben, sollten Sie die folgenden CSS-Regeln nutzen:

• display: block; für tbody: Verwandelt das tbody-Element in ein Blockelement, um das Scrollen zu ermöglichen.
• display: table; für tr: Behalten Sie das Tabellenverhalten bei, indem Sie die Anzeigeeigenschaft jedes tr-Elements auf „Tabelle“ setzen.
• Tabellenlayout: behoben; für tr und thead: Stellen Sie eine gleichmäßige Verteilung der Zellen sicher, indem Sie table-layout verwenden: behoben; für tr- und thead-Elemente.

table, tr td {
  border: 1px solid red;
}

tbody {
  display: block;
  height: 50px;
  overflow: auto;
}

thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead {
  width: calc(100% - 1em); /* Adjust for scrollbar width */
}

table {
  width: 400px;
}

Für den Fall, dass das tbody-Element aufgrund unzureichenden Inhalts immer noch keine Bildlaufleiste anzeigt, setzen Sie die Overflow-Eigenschaft explizit auf overflow-y: scroll; um das Erscheinen einer Bildlaufleiste zu erzwingen.

tbody {
  ...
  overflow-y: scroll;
}

Hinweis: Es ist wichtig zu wissen, dass dieser Ansatz zum Erreichen des Tabellenscrollens in bestimmten Szenarien Einschränkungen haben kann. Insbesondere kann es zu einer Fehlausrichtung zwischen Kopf- und Körperzellen kommen. Wenn die Ausrichtung entscheidend ist, sollten Sie die Verwendung einer robusteren Layouttechnik wie CSS Grid in Betracht ziehen.

Das obige ist der detaillierte Inhalt vonWarum scrollt mein Körper nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!