কী টেকঅ্যাওয়ে
- একটি এলিমেন্টর রেসপন্সিভ টেবিল ফোনে তিনটি প্যাটার্নের একটি ব্যবহার করে: কার্ডে স্তুপীকৃত সারি, টেবিলের নিজস্ব বাক্সের ভিতরে একটি সাইডওয়ে স্ক্রোল বা কম কলাম।
- একটি পাঁচ-কলামের টেবিলের পঠনযোগ্য থাকার জন্য প্রায় 640px প্রস্থের প্রয়োজন, এবং বেশিরভাগ ফোন 360px এবং 430px এর মধ্যে দেখায়, তাই আপনি একটি প্যাটার্ন বেছে না নিলে একটি প্রশস্ত টেবিল উপচে পড়ে।
- মাস্টার অ্যাডনস ডায়নামিক টেবিল উইজেট 768px চওড়া ডিভাইসে প্রতিটি সারি একটি কার্ডে স্ট্যাক করে যখন প্রতিক্রিয়াশীল টেবিল? চালু আছে, যা ডিফল্ট।
- অনুভূমিক স্ক্রোল দুটি CSS নিয়ম নেয়: ওভারফ্লো-x একটি মোড়কের উপর স্বয়ংক্রিয়ভাবে সেট করা হয় এবং এর ভিতরে টেবিলে একটি মিনিট-প্রস্থ।
- টেবিলপ্রেসের প্রতিটি টেবিলের সেটিংসে একটি অনুভূমিক স্ক্রোলিং চেকবক্স রয়েছে এবং এটি ডিফল্টরূপে বন্ধ থাকে।
একটি এলিমেন্টর রেসপন্সিভ টেবিল হল এমন একটি যা একটি ফোনে পঠনযোগ্য থাকে এবং টেবিলগুলি নিজেরাই তা করে না। কলামগুলির একটি ফোনের চেয়ে বেশি প্রস্থের প্রয়োজন, তাই টেবিলটি সাধারণত স্ক্রিনের ডান দিক থেকে বেরিয়ে আসে।
এটি মোকাবেলা করার তিনটি উপায় আছে। আমরা তিনটিই Elementor 4.3-এ তৈরি করেছি এবং একটি 390px প্রশস্ত ফোন স্ক্রিনে চেক করেছি।
বিষয়বস্তুর সারণী
মোবাইলে টেবিল ভাঙে কেন
একটি টেবিল তার কলামগুলিকে এলিমেন্টর কন্টেইনারগুলির সারি যেভাবে মোড়ানো যায় সেভাবে মোড়ানো যায় না। প্রতিটি কলাম অন্যদের পাশে বসতে হবে, এবং প্রত্যেকের তার দীর্ঘতম শব্দের জন্য জায়গা প্রয়োজন। আমাদের পাঁচ-কলামের শিপিং টেবিলটি প্রায় 640px এ আরামদায়ক। একটি 390px ফোনে ব্রাউজার কলামগুলিকে চেপে ধরে যতক্ষণ না শব্দগুলি তিনটি লাইন গভীরে স্ট্যাক করে এবং তারপরে শেষ কলামটি প্রান্ত থেকে পড়ে যায়।
Elementor এর নিজস্ব প্রতিক্রিয়াশীল নিয়ন্ত্রণ এখানে খুব বেশি সাহায্য করে না। আপনি প্রতি ডিভাইসে একটি সম্পূর্ণ উইজেট লুকিয়ে রাখতে পারেন বা এর প্রস্থ পরিবর্তন করতে পারেন, কিন্তু আপনি একটি টেবিলের ভিতরে পৌঁছাতে পারবেন না এবং এর কোষগুলিকে পুনরায় সাজাতে পারবেন না।
তিনটি প্রতিক্রিয়াশীল টেবিল নিদর্শন
প্রতিটি প্যাটার্ন একটি খরচ আছে।
| প্যাটার্ন | দর্শক যা দেখে | জন্য সেরা | খরচ |
|---|---|---|---|
| কার্ডে সারি স্ট্যাক করুন | প্রতি সারিতে একটি কার্ড, বাম দিকে লেবেল | সারি একবারে একটি পড়ে: সময়সূচী, বিশেষ শীট, মূল্য তালিকা | সারি জুড়ে একটি কলাম তুলনা করা কঠিন |
| অনুভূমিক স্ক্রোল | সাধারণ টেবিল, পাশে সোয়াইপ | একটি কলামের নিচে মান তুলনা করা | ভিজিটর সোয়াইপ না হওয়া পর্যন্ত কলাম লুকানো থাকে |
| কলাম লুকান | কী কলাম সহ একটি ছোট টেবিল | এক বা দুটি ঐচ্ছিক কলাম সহ টেবিল | ফোন দর্শকরা সেই ডেটা হারান |
প্যাটার্ন 1: কার্ডগুলিতে সারি স্ট্যাক করুন
স্ট্যাকিং প্রতিটি সারিকে একটি ছোট কার্ডে পরিণত করে। শিরোনাম সারিটি অদৃশ্য হয়ে যায় এবং প্রতিটি ঘর একটি লেবেল হিসাবে তার কলামের নাম দেখায়। কিছুই লুকানো নেই এবং কেউ পাশে স্ক্রোল করে না, তাই এটি সবচেয়ে নিরাপদ ডিফল্ট।
দ্য ডায়নামিক টেবিল উইজেট এটি একটি সুইচ দিয়ে করে।
- Elementor এ ডায়নামিক টেবিল উইজেট নির্বাচন করুন।
- বিষয়বস্তু ট্যাবে, খুলুন সেটিংস.
- ছেড়ে দেওয়া প্রতিক্রিয়াশীল টেবিল? হ্যাঁ সেট করুন। এটি ডিফল্টরূপে চালু আছে।
- একটি ফোনে পৃষ্ঠা খুলুন। 768px চওড়া পর্যন্ত ডিভাইসে সারি স্ট্যাক।
স্ট্যাকিং নিয়ম ডিভাইসের প্রস্থ পরীক্ষা করে, তাই একটি ডেস্কটপ ব্রাউজার উইন্ডো সঙ্কুচিত করা এটিকে ট্রিগার করবে না। একটি বাস্তব ফোনে বা ডিভাইস এমুলেশন সহ পরীক্ষা করুন। আপনি যদি স্টাইল ট্যাবে বড় সেল প্যাডিং সেট করেন, তাহলে পরীক্ষা করুন যে লেবেল এবং মানগুলি ফোনে খুব কাছাকাছি বসে না।
CSS ছাড়া স্ট্যাক যে একটি টেবিল চান? দ্য ডায়নামিক টেবিল উইজেট শুরু থেকে প্রতিক্রিয়াশীল টেবিল সুইচ চালু আছে।
প্যাটার্ন 2: অনুভূমিক স্ক্রোল
অনুভূমিক স্ক্রোল টেবিলটিকে যেমন আছে তেমন রাখে এবং দর্শককে এটিকে তার নিজস্ব বাক্সের ভিতরে পাশে সোয়াইপ করতে দেয়। পৃষ্ঠাটি নিজেই পাশে স্ক্রোল করে না। যখন লোকেদের একটি কলাম পড়ার প্রয়োজন হয় তখন এটি ব্যবহার করুন, যেমন দামের তুলনা করা।
এলিমেন্টরের এইচটিএমএল উইজেটে একটি এইচটিএমএল টেবিলের জন্য, টেবিলটিকে একটি ডিভ-এ মোড়ানো এবং দুটি নিয়ম যোগ করুন:
<div class="table-scroll">
<table class="wide-table">
...
</table>
</div>
<style>
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 640px; }
</style>দ্য min-width ব্রাউজারকে কলামগুলি চূর্ণ করা থেকে বিরত করে, এবং overflow-x: auto স্ক্রীনটি তার চেয়ে সংকীর্ণ হলেই স্ক্রোলটি যোগ করে। আপনার টেবিলের প্রতি কক্ষে এক লাইনে থাকার জন্য যে প্রস্থের প্রয়োজন তাতে 640px পরিবর্তন করুন।
দুর্বলতা হল যে কিছুই দর্শককে বলে না যে ডানদিকে আরও কিছু আছে। একটি কলাম যা অর্ধেক কাটা হয়, যেমন স্ক্রিনশটে, আপনি দিতে পারেন সেরা ইঙ্গিত, তাই সর্বনিম্ন-প্রস্থকে এমন একটি মান সেট করবেন না যা একটি কলামের প্রান্তে ঠিক শেষ হয়।
প্যাটার্ন 3: কলাম লুকান
কখনও কখনও একটি কলাম একটি ডেস্কটপে থাকা ভাল এবং একটি ফোনে অপ্রয়োজনীয়। এটি একটি ব্রেকপয়েন্টের নীচে লুকান এবং টেবিলটি অন্য কোন পরিবর্তন ছাড়াই ফিট হতে পারে।
প্রতিটিতে একটি ক্লাস যোগ করুন th এবং td কলামগুলিতে আপনি হারাতে পারেন, তারপর সেই ক্লাসটি ছোট পর্দায় লুকান:
<th class="hide-mobile">Delivery time</th>
...
<td class="hide-mobile">2 to 3 working days</td>
<style>
@media (max-width: 767px) {
.hide-cols .hide-mobile { display: none; }
}
</style>এখানে hide-cols টেবিলের উপর একটি ক্লাস হয়। 767px হল Elementor এর ডিফল্ট মোবাইল ব্রেকপয়েন্ট, তাই কলামগুলি ট্যাবলেটে ফিরে আসে।
শুধুমাত্র একটি ফোন ভিজিটর ছাড়া কি করতে পারে লুকান। যদি লুকানো কলাম সিদ্ধান্ত নেয় যে কেউ কিনবে, স্ট্যাকিং বা স্ক্রলিং ব্যবহার করবে।
এলিমেন্টরে প্রতিক্রিয়াশীল টেবিলপ্রেস টেবিল
এলিমেন্টরে রাখা একটি টেবিলপ্রেস টেবিল অন্য টেবিলের মতো আচরণ করে: প্রশস্তগুলি উপচে পড়ে। ফিক্স টেবিলপ্রেস সেটিংসে থাকে।
- যাও টেবিলপ্রেস এবং টেবিল সম্পাদনা করুন।
- স্ক্রোল করুন সাইট ভিজিটরদের জন্য টেবিল বৈশিষ্ট্য.
- টিক্ করা অনুভূমিক স্ক্রোলিং. এটি ডিফল্টরূপে বন্ধ।
- ক্লিক করুন পরিবর্তন সংরক্ষণ করুন.
আমাদের পরীক্ষায় এটি ওভারফ্লো ঠিক করেছে: টেবিলটি তার বাক্সের ভিতরে স্ক্রোল করা হয়েছে এবং পৃষ্ঠাটি স্থির রয়েছে। টেবিলপ্রেসে ফোনের জন্য স্ট্যাকিং এবং কোলাপসিং মোডও রয়েছে এবং সেগুলি এর পেইড রেসপন্সিভ টেবিল বৈশিষ্ট্যের অংশ।
একটি দ্রুত মোবাইল চেকলিস্ট
- একটি বাস্তব ফোনে পৃষ্ঠা খুলুন। এমুলেটররা টাচ স্ক্রোলিং এবং কিছু ডিভাইস-প্রস্থের নিয়ম মিস করে।
- পৃষ্ঠাটি পাশে স্ক্রোল করুন। পুরো পৃষ্ঠাটি সরে গেলে, টেবিলটি উপচে পড়ছে।
- হেডার টেক্সট ছোট রাখুন। "ফ্রি ওভার” "অর্ডার ওভারে ফ্রি ডেলিভারি" এর চেয়ে ভাল মোড়ানো।
- সবচেয়ে গুরুত্বপূর্ণ কলামটি প্রথমে রাখুন। একটি টেবিল স্ক্রোল করার সময় এটি দৃশ্যমান থাকে।
- কক্ষে 16px বডি টেক্সট লক্ষ্য করুন। একটি টেবিলের সাথে মানানসই ফন্ট সঙ্কুচিত করা এটিকে অপঠনযোগ্য করে তোলে।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
আমি কিভাবে এলিমেন্টরে একটি টেবিল প্রতিক্রিয়াশীল করতে পারি?
তিনটি প্যাটার্নের মধ্যে একটি বেছে নিন। একটি টেবিল উইজেট সহ কার্ডগুলিতে সারিগুলি স্ট্যাক করুন যা এটিকে সমর্থন করে, যেমন ডায়নামিক টেবিল। ওভারফ্লো-এক্স স্বয়ংক্রিয়ভাবে সেট সহ একটি ডিভিতে একটি HTML টেবিল মোড়ানো যাতে এটি পাশে স্ক্রোল করে। অথবা একটি CSS মিডিয়া ক্যোয়ারী সহ 767px এর নিচে ঐচ্ছিক কলাম লুকান।
মোবাইলে আমার এলিমেন্টর টেবিল কেটে দেওয়া হয় কেন?
টেবিলটি স্ক্রিনের চেয়ে চওড়া এবং কীভাবে মানিয়ে নিতে হয় তা কিছুই বলে না। টেবিলগুলি কলামগুলি মোড়ানো যায় না, তাই অতিরিক্ত প্রস্থ প্রান্ত অতিক্রম করে ছড়িয়ে পড়ে। একটি স্ক্রোল র্যাপার যোগ করুন, আপনার টেবিল উইজেটে একটি স্ট্যাকিং বিকল্প চালু করুন বা ছোট স্ক্রিনে একটি কলাম সরান।
আমি কি এলিমেন্টরে অনুভূমিকভাবে একটি টেবিল স্ক্রোল করতে পারি?
হ্যাঁ। একটি এইচটিএমএল টেবিলের জন্য, এটিকে ওভারফ্লো-এক্স: অটো সহ একটি ডিভের ভিতরে রাখুন এবং টেবিলটিকে একটি মিনিট-প্রস্থ দিন যেমন 640px। একটি টেবিলপ্রেস টেবিলের জন্য, সেই টেবিলের সেটিংসে সাইট ভিজিটরদের জন্য টেবিল বৈশিষ্ট্যের অধীনে অনুভূমিক স্ক্রোলিং টিক দিন।
Elementor একটি প্রতিক্রিয়াশীল টেবিল উইজেট আছে?
এলিমেন্টরের কোনো টেবিল উইজেট নেই, কোর প্লাগইন বা প্রো-তে। এলিমেন্টরের প্রতিক্রিয়াশীল টেবিলগুলি অ্যাডন উইজেট, টেবিল প্লাগইন যেমন টেবিলপ্রেস বা আপনার নিজস্ব CSS সহ HTML টেবিল থেকে আসে।
কোনটি মোবাইল, স্ট্যাকিং বা স্ক্রোলিং এ ভাল?
স্ট্যাকিং ভাল হয় যখন প্রতিটি সারি একা থাকে, যেমন একটি সময়সূচীতে একটি ক্লাস। দর্শকরা যখন একটি কলামের নিচে সংখ্যার তুলনা করে তখন স্ক্রলিং করা ভালো, কারণ স্ট্যাক করা কার্ডগুলি সেই সংখ্যাগুলিকে অনেক দূরে রাখে।
চূড়ান্ত চিন্তা
একটি এলিমেন্টর রেসপন্সিভ টেবিল তৈরি করতে, এটি থেকে একজন ফোন ভিজিটরের কী প্রয়োজন তা নির্ধারণ করুন। প্রতিটি সারি একা পড়া হলে সারি স্ট্যাক করুন, কলাম তুলনা করা হলে স্ক্রোল করুন এবং ডেটা ঐচ্ছিক হলেই কলাম লুকান।
আপনি যদি সিএসএস না লিখতে চান, ডায়নামিক টেবিল প্যানেলের একটি সুইচ থেকে স্ট্যাকিং প্যাটার্ন পরিচালনা করে।
সম্পর্কিত পড়া
