Wie können Sie Zeilen und Spalten in Tabellen mit CSS hervorheben?

CSS-Hervorhebungen für Spalten, Spaltengruppen und Zeilen verbessern interaktive Tabellen

Hohe Tabellen sind in der Regel für die Darstellung komplexer Datenorganisationen konzipiert, wobei die visuelle Hervorhebung bestimmter Abschnitte das Verständnis des Benutzers verbessert. Traditionell wird die Pseudoklasse :hover auf ein einzelnes Element angewendet, beispielsweise auf eine Tabellenzelle. Es ist jedoch möglich, diese Funktionalität mithilfe von CSS auf Gruppenelemente (z. B. Spalten oder Zeilen) zu erweitern.

Verwendung von ::before- und ::after-Pseudoelementen

Durch die Nutzung von :: Vor und nach Pseudoelementen kann die Hervorhebung über das ausgewählte Element hinaus angewendet werden. Diese Elemente erstellen im Wesentlichen virtuelle Elemente, die relativ zu ihren übergeordneten Elementen platziert werden können.

Hervorhebungen auf Zeilen und Spalten anwenden

Um Hervorhebungen auf Zeilen und Spalten anzuwenden, führen Sie die folgenden Schritte aus:

• Erstellen Sie ein ::before- und ::after-Pseudoelement für Zeilen und Spalten.
• Stilisieren Sie sie mit einer Hintergrundfarbe um die Hervorhebung anzuzeigen.
• Verwenden Sie absolute Positionierung und Überlauf, um sicherzustellen, dass die Hervorhebung über die Zellgrenzen hinausgeht.
• Optional können Sie Klassen hinzufügen, um zur Anpassung zwischen Zeilen- und Spaltenhervorhebung zu unterscheiden.

Beispiel Implementierung

CSS:

table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

td, th, .row, .col {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::before,
.row:hover::before { 
    background-color: #ffa;
    content: '<pre class="brush:php;toolbar:false"><table>
    <tr>
        <th></th>
        <th class="col">50kg</th>
        <th class="col">55kg</th>
        <th class="col">60kg</th>
        <th class="col">65kg</th>
        <th class="col">70kg</th>
    </tr>
    <tr>
        <th class="row">160cm</th>
        <td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
    </tr>
    <tr>
        <th class="row">165cm</th>
        <td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
    </tr>
    <tr>
        <th class="row">170cm</th>
        <td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
    </tr>
    <tr>
        <th class="row">175cm</th>
        <td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
    </tr>
</table>

a0'; height: 100%; left: -5000px; position: absolute; top: 0; width: 10000px; z-index: -1; } td:hover::after, .col:hover::after { background-color: #ffa; content: 'a0'; height: 10000px; left: 0; position: absolute; top: -5000px; width: 100%; z-index: -1; }

HTML:

Dieser Ansatz bietet eine flexible und anpassbare Lösung für Hervorheben von Zeilen und Spalten in Tabellen.

Das obige ist der detaillierte Inhalt vonWie können Sie Zeilen und Spalten in Tabellen mit CSS hervorheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!