လုပ်နည်း - Responsive Tables
တုံ့ပြန်မှုဇယားတစ်ခုကို ဖန်တီးနည်းကို လေ့လာပါ။
တုံ့ပြန်မှုဇယားများ
မျက်နှာပြင်သည် အကြောင်းအရာအပြည့်အစုံကိုပြသရန် သေးငယ်လွန်းပါက တုံ့ပြန်မှုဇယားသည် အလျားလိုက် scroll bar ကိုပြသပါမည်။ အကျိုးသက်ရောက်မှုမြင်ရန် ဘရောက်ဆာဝင်းဒိုးကို အရွယ်အစားပြောင်းပါ-
နာမည် | မျိုးနွယ်အမည် | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ဂျေးလ် | စမစ် | ၅၀ | ၅၀ | ၅၀ | ၅၀ | ၅၀ | ၅၀ | ၅၀ | ၅၀ | ၅၀ | ၅၀ | ၅၀ | ၅၀ | ၅၀ | ၅၀ | ၅၀ | ၅၀ | ၅၀ | ၅၀ | ၅၀ |
ဧဝ | လုပ်ပြတယ်။ | ၉၄ | ၉၄ | ၉၄ | ၉၄ | ၉၄ | ၉၄ | ၉၄ | ၉၄ | ၉၄ | ၉၄ | ၉၄ | ၉၄ | ၉၄ | ၉၄ | ၉၄ | ၉၄ | ၉၄ | ၉၄ | ၉၄ |
အာဒံ | ဂျွန်ဆင် | ၆၇ | ၆၇ | ၆၇ | ၆၇ | ၆၇ | ၆၇ | ၆၇ | ၆၇ | ၆၇ | ၆၇ | ၆၇ | ၆၇ | ၆၇ | ၆၇ | ၆၇ | ၆၇ | ၆၇ | ၆၇ | ၆၇ |
တုံ့ပြန်မှုရှိသောဇယားတစ်ခုဖန်တီးရန်၊ overflow-x:auto
<table> ပတ်လည်တွင် ကွန်တိန်နာဒြပ်စင်တစ်ခုကို ထည့်ပါ-
ဥပမာ
<div style="overflow-x:auto;">
<table>
...
</table>
</div>
မှတ်ချက်- OS X Lion (Mac တွင်) Scrollbars များကို ပုံသေအားဖြင့် ဝှက်ထားပြီး အသုံးပြုသည့်အခါမှသာ ပြသသည် ("overflow:scroll" သို့မဟုတ် အလိုအလျောက်သတ်မှတ်ထားသော်လည်း)။
အကြံပြုချက်- ဇယား များကို ပုံစံသွင်းပုံအကြောင်း ပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ CSS Tables Tutorial သို့ သွားပါ ။