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.

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

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

• Damit ist der obige Fall abgeschlossen

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!