Bagaimanakah Anda Boleh Menyerlahkan Baris dan Lajur dalam Jadual dengan CSS?

Sorotan CSS untuk Cols, Colgroups dan Rows Enhance Interactive Tables

Jadual tinggi lazimnya direka bentuk untuk memaparkan organisasi data yang kompleks, di mana menyerlahkan bahagian tertentu secara visual meningkatkan kefahaman pengguna. Secara tradisinya, kelas pseudo :hover digunakan pada satu elemen, seperti sel jadual. Walau bagaimanapun, adalah mungkin untuk melanjutkan fungsi ini kepada elemen kumpulan (seperti lajur atau baris) menggunakan CSS.

Menggunakan ::before dan ::after Pseudo-Elements

Dengan memanfaatkan :: sebelum dan ::selepas pseudo-elemen, penyerlahan boleh digunakan di luar elemen yang dipilih. Elemen ini pada asasnya mencipta elemen maya yang boleh diletakkan secara relatif kepada induknya.

Menggunakan Sorotan pada Baris dan Lajur

Untuk menggunakan penyerlahan pada baris dan lajur, menggunakan langkah berikut:

• Buat ::sebelum dan ::selepas unsur pseudo untuk kedua-dua baris dan lajur.
• Gayakannya dengan warna latar belakang untuk menunjukkan penyerlahan.
• Gunakan kedudukan dan limpahan mutlak untuk memastikan penyerlahan melangkaui sempadan sel.
• Secara pilihan, tambahkan kelas pada bezakan antara penyerlahan baris dan lajur untuk penyesuaian.

Contoh Pelaksanaan

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:

Pendekatan ini menyediakan penyelesaian yang fleksibel dan boleh disesuaikan untuk menyerlahkan baris dan lajur dalam jadual.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Menyerlahkan Baris dan Lajur dalam Jadual dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!