Ein Beispiel für die Implementierung eines horizontalen Scrollens zwischen festen Tabellenspalten und Tabellenüberschriften mithilfe von reinem CSS

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen ein, wie Sie mit reinem CSS feste Tabellenspalten und -überschriften sowie horizontales Scrollen in der Mitte erzielen. Der Artikel stellt Ihnen anhand von Beispielen detailliert die Ideen und Methoden vor, um diesen Effekt zu erzielen Code hat einen gewissen Referenz- und Lernwert für jedermanns Studium oder Arbeit. Freunde, die ihn benötigen, können einen Blick darauf werfen.

Vorwort

Das Backend-Managementsystem, an dem ich in letzter Zeit arbeite, muss eine große Anzahl von Tabellen verarbeiten, da das ursprüngliche Projekt ein for verwendet Schleife und verkettete Zeichenfolgen Es wurde auf eine Weise implementiert, die zu einer Menge JS-Code führte. Die Verschachtelung verschiedener einfacher Anführungszeichen und doppelter Anführungszeichen war ein Problem, sodass vue.js für das Rendern von Vorlagen verwendet wurde wurde plötzlich stark reduziert, und ich fühlte mich wohl;

Der Text musste aufgrund der großen Anzahl von Spalten umgebrochen werden Bei einigen Tabellen wurde der Text zusammengedrückt und nach unten umgebrochen; die Szene war schrecklich anzusehen; daher wird die Methode übernommen, keine Zeilenumbrüche zu erzwingen

Das Neue Das Problem besteht darin, dass nach erzwungenen Zeilenumbrüchen die gesamte Breite über den Textkörper hinausgeht.

Daher erwägen wir, die Tabelle wichtig zu machen. Verwenden Sie die horizontale Bildlaufleiste, um sie in die Mitte zu ziehen 🎜>

<style>
p{
     white-space: nowrap;//强制不折行
}
</style>

In Anbetracht der Tatsache, dass die Spalten festgelegt werden sollten, wird die Tabelle im folgenden Fall mit Float wiederhergestellt. dann schweben, um es wiederherzustellen

<style>
p{
    white-space: nowrap;
    overflow: hidden;//控制溢出隐藏
    overflow-x: scroll;//设置横向滚动条
}
</style>

Da es anpassungsfähig sein muss, wird der Prozentsatz verwendet Do;

• Damit ist der obige Fall abgeschlossen

Ein weiterer Punkt ist, dass auch die Kopfzeile der mittleren Tabelle benötigt wird. Es ist behoben, dass sie nicht mit der Stirnseite des unteren Tisches verschoben werden kann. Die Idee, die ich hier übernommen habe, ist zu verwenden Positionierung; da die oben genannten Angaben alle mit Prozentsätzen erfolgen, ist der linke Wert der Positionierung auch hier kein Code;

Das obige ist der detaillierte Inhalt vonEin Beispiel für die Implementierung eines horizontalen Scrollens zwischen festen Tabellenspalten und Tabellenüberschriften mithilfe von reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!