ٹیبل کے کالم پر کم سے کم چوڑائی کو جعلی بنانا

اچھی بات <table> ٹیبل ڈیٹا دکھانے کے لیے ٹیگ سب سے زیادہ سیمنٹک ایچ ٹی ایم ایل ہے۔ لیکن مجھے یہ کنٹرول کرنا بہت مشکل لگتا ہے کہ ٹیبل کو کس طرح پیش کیا جاتا ہے، خاص طور پر ایک متحرک ماحول میں کالم کی چوڑائی جہاں آپ کو معلوم نہیں ہوگا کہ ہر ٹیبل سیل میں کتنا مواد جا رہا ہے۔ بعض صورتوں میں، ایک کالم انتہائی چوڑا ہوتا ہے جبکہ دوسرے کو کچل دیا جاتا ہے۔ دوسری بار، ہمیں مساوی چوڑائی ملتی ہے، لیکن ایک کالم کی قیمت پر جس میں زیادہ مواد ہوتا ہے اور اسے زیادہ جگہ کی ضرورت ہوتی ہے۔

لیکن مجھے ایک سی ایس ایس ٹرکس-وائی کام مل گیا جو چیزوں کو قدرے آسان بنانے میں مدد کرتا ہے۔ یہی میں آپ کو اس پوسٹ میں دکھانا چاہتا ہوں۔

مسئلہ

سب سے پہلے ہمیں یہ سمجھنے کی ضرورت ہے کہ براؤزر کے ذریعے لے آؤٹ کو کیسے ہینڈل کیا جاتا ہے۔ ہمارے پاس ہے 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 a کے بجائے کالم پر width. اس طرح، کالم کہے گا، "میں آپ سب کو اپنی چوڑائی میں سے کچھ اس وقت تک دے سکتا ہوں جب تک کہ ہم اس کم از کم قیمت تک نہ پہنچ جائیں۔" پھر ٹیبل اپنے کنٹینر کو بہا کر لے جائے گا اور صارف کو باقی میز کو دکھانے کے لیے ایک افقی اسکرول دے گا۔ لیکن بدقسمتی سے، min-width میز پر کالموں کی طرف سے احترام نہیں کیا جاتا ہے <col> عنصر

حل

حل یہ ہے کہ جعلی اے min-width اور ہمیں اسے کرنے کے لیے تھوڑا تخلیقی ہونا چاہیے۔

ہم ایک خالی شامل کر سکتے ہیں۔ <col> ہمارے لیے دوسرے کالم کے طور پر <colgroup> HTML میں اور لاگو کریں a 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) کا احترام کیا جاتا ہے اور جگہ پر رہتا ہے۔

Voilà! ہمارے پاس غلط ہے۔ min-width ایک میز سیل پر سیٹ کریں. دستیاب جگہ کے بدلتے ہی پہلا سیل موڑتا ہے اور افقی اسکرولنگ کے لیے ٹیبل اوور فلو ہوتا ہے جیسا کہ ہمیں امید تھی۔

(میں نے تھوڑا سا اضافہ کیا۔ چپچپا پوزیشننگ وہاں کے پہلے کالم تک۔)

رسائی

آئیے یہاں رسائی کے بارے میں مکمل طور پر نہ بھولیں۔ میں نے ونڈوز پر NVDA اور میک او ایس پر وائس اوور کے ذریعے ٹیبل چلایا اور پایا کہ پانچوں کالموں کا اعلان کیا گیا ہے، چاہے ہم ان میں سے صرف چار استعمال کر رہے ہوں۔ اور جب پہلا کالم فوکس میں ہوتا ہے، تو یہ اعلان کرتا ہے، "کالم ایک سے دو تک"۔ بالکل خوبصورت نہیں بلکہ کسی کے کھو جانے کا سبب بھی نہیں بنتا۔ میں تصور کرتا ہوں کہ ہم ایک پھینک سکتے ہیں۔ aria-hidden غیر استعمال شدہ کالم پر انتساب، لیکن یہ بھی جان لیں کہ ARIA ناقص HTML کا متبادل نہیں ہے۔

---

میں تسلیم کروں گا، یہ تھوڑا سا، ام، ہیکی محسوس ہوتا ہے. لیکن یہ کام کرتا ہے! مجھے بتائیں کہ کیا آپ کے پاس تبصرے میں کوئی مختلف نقطہ نظر ہے… یا کسی الجھن کے بارے میں جانتے ہیں کہ یہ "ہیک" ہمارے صارفین کو لا سکتا ہے۔

• SEO سے چلنے والا مواد اور PR کی تقسیم۔ آج ہی بڑھا دیں۔
• پلیٹو بلاک چین۔ Web3 Metaverse Intelligence. علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
• ماخذ: https://css-tricks.com/faking-min-width-on-a-table-column/