Heim > Artikel > Web-Frontend > CSS-Implementierung von Operationstabellenspalten

CSS-Implementierung von Operationstabellenspalten

php中世界最好的语言Original: 2018-03-21 13:11:161706Durchsuche

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie CSS3, um Ballonbildstile zu erstellenNächster Artikel：Verwenden Sie CSS3, um Ballonbildstile zu erstellen

In Verbindung stehende Artikel

Mehr sehen