Bagaimana untuk Menambah Sempadan-Bawah pada Baris Jadual ?

Sifat 'border-bottom' CSS digunakan untuk menambah sempadan di bahagian bawah mana-mana elemen HTML. Walaupun, ia tidak menjejaskan secara langsung baris jadual. Sebabnya ialah sifat runtuhan sempadan telah berasingan sebagai nilai yang dipratentukan dan ia tidak membenarkan gaya baris. Panduan ini menggambarkan cara menggunakan sempadan bawah pada elemen jadual.

Bagaimana untuk Menambah Sempadan-Bawah pada Baris Jadual ?
Tetapkan sempadan-bawah kepada Elemen Baris Jadual
Elemen Jadual Gaya
Gaya Elemen 'td'.
Gaya Elemen 'tr'.

Bagaimana untuk Menambah Sempadan-Bawah pada Baris Jadual ?

Menambah bahagian bawah sempadan pada baris jadual akan menambah sempadan pada keseluruhan baris untuk membuat pengalaman visual yang lebih baik dan untuk menarik tumpuan pengguna.

Contoh terperinci untuk menambahkan bahagian bawah sempadan pada baris jadual ditunjukkan di bawah:

Tetapkan sempadan-bawah kepada Baris Jadual

Buat jadual ringkas yang mengandungi 3 baris dan 3 lajur dalam fail HTML kami yang dibuat menggunakan elemen , dan :

< meja >
< tr kelas = 'baris' >
< ke > Nama < / ke >
< ke > Status < / ke >
< ke > Nombor bilik < / ke >
< / tr >
< tr kelas = 'baris' >
< td > Fakhar < / td >
< td > Pelajar < / td >
< td > 05 < / td >
< / tr >
< tr kelas = 'baris' >
< td > Umar < / td >
< td > Pelajar < / td >
< td > 05 < / td >
< / tr >
< / meja >

Dalam coretan kod di atas, kami telah menetapkan kelas 'baris' pada baris jadual , supaya ia boleh diakses kemudian dalam CSS.

Halaman web akan kelihatan seperti ini:

Elemen Jadual Gaya

Dalam bahagian CSS pilih elemen jadual dan selaraskan teks ke tengah. Selepas itu, gunakan ' sempadan-runtuh ” harta untuk menetapkan nilainya untuk runtuh:

meja
{
border-collapse: runtuh;
text-align: tengah;
}

Gaya Elemen 'td'.

Untuk perwakilan visual yang lebih baik, mari kita berikan padding 20px kepada elemen data jadual '' dan pengepala jadual '':

td
{
padding:20px;
}
ke
{
padding:20px;
}

Output kelihatan seperti ini:

Output di atas telah menunjukkan padding 20px dan menjajarkan teks ke tengah.

Gaya Elemen 'tr'.

Dalam fail CSS, tambahkan sifat sempadan bawah di bawah pemilih 'tr'. Ia menetapkan kepada setiap baris jadual termasuk baris tajuk. Sebagai contoh, tetapkan nilainya kepada 2px solidcyan:

tr {
bahagian bawah sempadan: 2px darkcyan pepejal;
}

Selepas melaksanakan coretan kod di atas, halaman web kelihatan seperti ini:

Itu semua tentang cara menambah sempadan di bahagian bawah setiap baris jadual '

”.

Kesimpulan

Untuk menambah sempadan di bahagian bawah elemen , tetapkan sifat CSS border-collapse untuk runtuh dan gunakan sifat sempadan bawah pada elemen ''. Ia membenarkan sifat CSS untuk menggunakan sempadan pada meja. Begitulah cara anda boleh menambahkan bahagian bawah sempadan pada setiap teg “

” dengan mudah.

Bagaimana untuk Menambah Sempadan-Bawah pada Baris Jadual ?