একটি টেবিলের কলামে ন্যূনতম প্রস্থ জাল করা

ভাল ওল' <table> ট্যাবুলার ডেটা দেখানোর জন্য ট্যাগ হল সবচেয়ে শব্দার্থিক HTML। কিন্তু টেবিলটি কীভাবে উপস্থাপিত হয় তা নিয়ন্ত্রণ করা আমার কাছে খুবই কঠিন, বিশেষ করে একটি গতিশীল পরিবেশে কলামের প্রস্থ যেখানে আপনি হয়তো জানেন না যে প্রতিটি টেবিলের ঘরে কত সামগ্রী যাচ্ছে। কিছু ক্ষেত্রে, একটি কলাম সুপার প্রশস্ত হয় যখন অন্যগুলি স্ক্র্যাঞ্চ করা হয়। অন্য সময়, আমরা সমান প্রস্থ পাই, কিন্তু একটি কলামের খরচে যাতে আরও সামগ্রী থাকে এবং আরও স্থানের প্রয়োজন হয়।

কিন্তু আমি একটি CSS কৌশল খুঁজে পেয়েছি যা কিছু সহজ করতে সাহায্য করে। আমি এই পোস্টে আপনাকে দেখাতে চাই কি.

সমস্যাটি

প্রথমে আমাদের বুঝতে হবে কিভাবে ব্রাউজার দ্বারা লেআউট পরিচালনা করা হয়। আমাদের সেটা আছে table-layout প্রতিটি টেবিল কলামের জন্য একটি টেবিলের প্রস্থ কীভাবে বিতরণ করা উচিত তা নির্ধারণ করতে CSS-এ সম্পত্তি। এটি দুটি মানগুলির মধ্যে একটি লাগে:

• auto (ডিফল্ট)
• fixed

আসুন একটি টেবিলের কলামে কোনো প্রস্থ নির্ধারণ না করে শুরু করি। অন্য কথায়, আমরা ব্রাউজারকে প্রয়োগ করে প্রতিটি কলাম কত প্রস্থ দিতে হবে তা নির্ধারণ করতে দেব table-layout: auto CSS এ এটিতে। আপনি লক্ষ্য করবেন যে, ব্রাউজারটি প্রতিটি কলামের মধ্যে সম্পূর্ণ উপলব্ধ প্রস্থকে বিভক্ত করার জন্য অ্যালগরিদমের সাথে সর্বোত্তম চেষ্টা করে।

যদি আমরা একটি স্বয়ংক্রিয় টেবিল বিন্যাস সঙ্গে অদলবদল আউট table-layout: fixed, তারপর ব্রাউজার শুধুমাত্র কলামের মোট সংখ্যা দ্বারা সম্পূর্ণ উপলব্ধ স্থান ভাগ করবে, তারপর প্রতিটি কলামের জন্য প্রস্থ হিসাবে সেই মানটি প্রয়োগ করবে:

কিন্তু আমরা যদি আমাদের কলামের প্রস্থ নিয়ন্ত্রণ করতে চাই? আমাদের সেটা আছে <colgroup> সাহায্য করার জন্য উপাদান! এটি স্বতন্ত্র নিয়ে গঠিত <col> উপাদানগুলি আমরা প্রতিটি কলামের জন্য প্রয়োজনীয় সঠিক প্রস্থ নির্দিষ্ট করতে ব্যবহার করতে পারি। এর সাথে কাজ করে দেখুন কিভাবে table-layout: auto:

আমি দৃষ্টান্তের জন্য শৈলীগুলি ইনলাইন করেছি।

ব্রাউজার ইনলাইন প্রস্থকে সম্মান করছে না কারণ যোগ করার সময় তারা উপলব্ধ টেবিলের স্থানের পরিমাণ অতিক্রম করে। ফলস্বরূপ, টেবিলটি কলামগুলি থেকে স্থান চুরি করে যাতে সমস্ত কলাম দৃশ্যমান হয়। এটি পুরোপুরি সূক্ষ্ম ডিফল্ট আচরণ।

কিভাবে <colgroup> সাথে কাজ করে table-layout: fixed. খুঁজে বের কর:

এটা মোটেও ভালো লাগছে না। বাকি কলামগুলির জন্য একটি নির্দিষ্ট প্রস্থ বজায় রেখে কিছুটা ফ্লেক্স করার জন্য আমাদের এটিতে একগুচ্ছ বিষয়বস্তু সহ কলামের প্রয়োজন। একটি নির্দিষ্ট table-layout মান প্রস্থকে সম্মান করে — কিন্তু এতটাই যে এটি কলামের স্থানটি খেয়ে ফেলে যার জন্য সবচেয়ে বেশি স্থান প্রয়োজন… যা আমাদের জন্য নো-গো।

এটি সহজেই সমাধান করা যেতে পারে যদি শুধুমাত্র আমরা একটি সেট করতে পারি min-width কলামের পরিবর্তে কলামে width. এইভাবে, কলামটি বলবে, “আমরা এই ন্যূনতম মানটিতে না পৌঁছানো পর্যন্ত আমি আপনাদের সবাইকে আমার কিছু প্রস্থ দিতে পারি। কিন্তু দুঃখজনকভাবে, min-width টেবিলের কলামগুলি দ্বারা সম্মানিত হয় না <col> উপাদান।

সমাধান

সমাধান হল জাল ক min-width এবং এটা করতে আমাদের একটু সৃজনশীল হতে হবে।

আমরা একটি খালি যোগ করতে পারেন <col> আমাদের জন্য দ্বিতীয় কলাম হিসাবে <colgroup> HTML এ এবং একটি প্রয়োগ করুন colspan প্রথম কলামের বৈশিষ্ট্য যাতে প্রথম কলামটি উভয় কলামের জন্য স্থান নেয়:

<table> <colgroup> <col class="col-200" /> <col /> <col class="col-input" /> <col class="col-date" /> <col class="col-edit" /> </colgroup> <thead> <tr> <th colspan="2">Project name</th> <th>Amount</th> <th>Date</th> <th>Edit</th> </tr> </thead> <!-- etc. -->
</table>

নোট করুন যে আমি আগের উদাহরণ থেকে ইনলাইন শৈলীর জায়গায় ক্লাস যোগ করেছি। একই ধারণা এখনও প্রযোজ্য: আমরা প্রতিটি কলামে প্রস্থ প্রয়োগ করছি।

কৌতুক প্রথম মধ্যে যে সম্পর্ক <col> এবং খালি দ্বিতীয় <col>. যদি আমরা প্রথমে একটি প্রস্থ প্রয়োগ করি <col> (এটা 200px উপরের স্নিপেটে), তারপর দ্বিতীয় কলামটি খাওয়া হবে যখন নির্দিষ্ট টেবিল লেআউটটি কলামগুলিতে বিতরণ করার জন্য উপলব্ধ স্থানকে ভাগ করে। কিন্তু প্রথম কলামের প্রস্থ (200px) সম্মান করা হয় এবং জায়গায় থাকে।

ভাল খবর! আমরা একটি ভুল আছে min-width একটি টেবিল সেল উপর সেট করুন. উপলব্ধ স্থান পরিবর্তনের সাথে সাথে প্রথম ঘরটি নমনীয় হয় এবং অনুভূমিক স্ক্রলিংয়ের জন্য টেবিলটি উপচে পড়ে ঠিক যেমনটি আমরা আশা করেছিলাম।

(আমি একটু যোগ করেছি স্টিকি পজিশনিং সেখানে প্রথম কলামে।)

অভিগম্যতা

আসুন এখানে অ্যাক্সেসযোগ্যতা সম্পর্কে সম্পূর্ণরূপে ভুলবেন না। আমি উইন্ডোজের NVDA এর মাধ্যমে এবং macOS-এ ভয়েসওভারের মাধ্যমে টেবিলটি চালিয়েছি এবং দেখেছি যে সমস্ত পাঁচটি কলাম ঘোষণা করা হয়েছে, এমনকি যদি আমরা তাদের মধ্যে শুধুমাত্র চারটি ব্যবহার করি। এবং যখন প্রথম কলাম ফোকাসে থাকে, তখন এটি ঘোষণা করে, "কলাম এক থেকে দুই"। পুরোপুরি মার্জিত নয় তবে কাউকে হারিয়ে যাওয়ার কারণও হবে না। আমি কল্পনা করি আমরা একটি নিক্ষেপ করতে পারে aria-hidden অব্যবহৃত কলামে অ্যাট্রিবিউট, তবে এটাও জেনে রাখুন যে ARIA দুর্বল HTML-এর বিকল্প নয়।

---

আমি স্বীকার করব, এটি একটু, উম, হ্যাকি লাগছে। কিন্তু এটা কাজ করে! আপনার মন্তব্যে ভিন্ন পদ্ধতির থাকলে আমাকে জানান... অথবা এই "হ্যাক" আমাদের ব্যবহারকারীদের কাছে আনতে পারে এমন কোনো বিভ্রান্তি সম্পর্কে জানেন।

• এসইও চালিত বিষয়বস্তু এবং পিআর বিতরণ। আজই পরিবর্ধিত পান।
• প্লেটোব্লকচেন। Web3 মেটাভার্স ইন্টেলিজেন্স। জ্ঞান প্রসারিত. এখানে প্রবেশ করুন.
• উত্স: https://css-tricks.com/faking-min-width-on-a-table-column/