CSS ဇယားပုံစံ
Table Padding ၊
ဘောင်နှင့် ဇယားတစ်ခုရှိ အကြောင်းအရာကြားရှိ နေရာလွတ်ကို ထိန်းချုပ်ရန်
padding
<td> နှင့် <th> ဒြပ်စင်များပေါ်ရှိ ပိုင်ဆိုင်မှုကို အသုံးပြုပါ-
ဥပမာ
th, td
{
padding: 15px;
text-align: left;
}
Horizontal Dividers
နာမည် | မျိုးနွယ်အမည် | စုဆောင်းငွေ |
---|---|---|
ပီ | Griffin | $100 |
Lois | Griffin | $150 |
ဂျိုး | Swanson | $300 |
border-bottom
အလျားလိုက်ပိုင်းခြားမှုများအတွက် <th> နှင့် <td> သို့ ပိုင်ဆိုင်မှုကို ထည့်ပါ -
ဥပမာ
th, td {
border-bottom: 1px solid #ddd;
}
Hoverable Table
:hover
မောက်စ်ပေါ်ရှိ ဇယားတန်းများကို မီးမောင်းထိုးပြရန် <tr> ပေါ်ရှိ ရွေးချယ်ရေး ကိရိယာကို အသုံးပြု ပါ-
နာမည် | မျိုးနွယ်အမည် | စုဆောင်းငွေ |
---|---|---|
ပီ | Griffin | $100 |
Lois | Griffin | $150 |
ဂျိုး | Swanson | $300 |
ဥပမာ
tr:hover {background-color: yellow;}
အစင်းကြောင်းဇယားများ
နာမည် | မျိုးနွယ်အမည် | စုဆောင်းငွေ |
---|---|---|
ပီ | Griffin | $100 |
Lois | Griffin | $150 |
ဂျိုး | Swanson | $300 |
မျးကျားအစင်းလိုက် ဇယားများအတွက်၊ ရွေးချယ်သည့်ကိရိယာကိုအသုံးပြုပြီး စားပွဲအတန်းအတန်းများအားလုံးသို့ nth-child()
a ထည့်ပါ -background-color
ဥပမာ
tr:nth-child(even) {background-color: #f2f2f2;}
ဇယားအရောင်
အောက်ပါဥပမာသည် <th> ဒြပ်စင်များ၏ နောက်ခံအရောင်နှင့် စာသားအရောင်ကို သတ်မှတ်သည်-
နာမည် | မျိုးနွယ်အမည် | စုဆောင်းငွေ |
---|---|---|
ပီ | Griffin | $100 |
Lois | Griffin | $150 |
ဂျိုး | Swanson | $300 |
ဥပမာ
th {
background-color: #04AA6D;
color: white;
}