Heim >Web-Frontend >CSS-Tutorial >CSS-Implementierung von Operationstabellenspalten
CSS-Implementierung von Operationstabellenspalten
- php中世界最好的语言Original
- 2018-03-21 13:11:161758Durchsuche
Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Implementierung von Tabellenspaltenoperationen mit CSS vorstellen. Hier sind praktische Fälle, schauen wir sie uns gemeinsam an.
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-SchleifeDie Methode zum Spleißen von Zeichenfolgen führte zu vielen Verschachtelungen von einfachen und doppelten Anführungszeichen. Daher wurde vue.js eingeführt 🎜>Vorlagen-Rendering;Der Arbeitsaufwand wurde plötzlich stark reduziert und ich fühlte mich wohl;
Der Text wurde zum Zeilenumbruch gezwungenAufgrund der großen Anzahl von Spalten in einigen Tabellen war der gesamte Text zusammengedrückt und nach unten umgebrochen, daher habe ich die Methode übernommen, keinen Zeilenumbruch zu erzwingen.
Das neue Problem ist dass nach dem erzwungenen Zeilenumbruch die gesamte Breite über den Körper hinausgeht<style>
p{
white-space: nowrap;//强制不折行
}
</style>
Also habe ich mir überlegt, die wichtigen Spalten der Tabelle mit der horizontalen Bildlaufleiste in die Mitte zu ziehen; 🎜>
In Anbetracht dessen, dass die Spalten fixiert werden sollten, sollte die Tabelle geteilt werden und dann Float verwendet werden, um die Tabelle wiederherzustellen; Angesichts der Tatsache, dass es anpassungsfähig sein muss, verwendet es dazu Prozentsätze;<style>
p{
white-space: nowrap;
overflow: hidden;//控制溢出隐藏
overflow-x: scroll;//设置横向滚动条
}
</style>
- Damit ist der obige Fall abgeschlossen
- Ich glaube Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! Empfohlene Lektüre:
<style>
p{
width: 100%;
white-space: nowrap;
}
table td{
border: 1px solid #000;
}
.tab1{
width: 20%;
float: left;
}
.tab2{
width: 70%;
float: left;
overflow: hidden;
overflow-x: scroll;
}
.tab3{
width: 10%;
float: left;
}
</style>
<body>
<p>
<table class="tab1">
<thead>
<tr>
<th>首列</th>
</tr>
</thead>
<tbody>
<tr>
<td>首列</td>
</tr>
</tbody>
</table>
<table class="tab2">
<thead>
<tr>
<th>中间列</th>
</tr>
</thead>
<tbody>
<tr>
<td>中间列</td>
</tr>
</tbody>
</table>
<table class="tab3" >
<thead>
<tr>
<th>尾列</th>
</tr>
</thead>
<tbody>
<tr>
<td>尾列</td>
</tr>
</tbody>
</table>
</p>
</body>
Detaillierte Erläuterung der Verwendung von Zeigerereignissen in CSS3
focus-within Detaillierte Gebrauchsanweisung
Das obige ist der detaillierte Inhalt vonCSS-Implementierung von Operationstabellenspalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!