এইচটিএমএল / সিএসএস ব্যবহার করে (আপেক্ষিক মাপের সাথে) কোনও সারি সারি তৈরি করার জন্য কোনও সারণীর মধ্যে থাকা সারণীর পুরো প্রস্থকে প্রসারিত করতে হবে?
কক্ষগুলি সমান প্রস্থ হওয়া উচিত এবং বাইরের সারণির আকারও গতিশীল <table width="100%">।
বর্তমানে যদি আমি একটি নির্দিষ্ট আকার নির্দিষ্ট না করি; কোষগুলি কেবল তাদের সামগ্রীতে ফিট করার জন্য স্বতঃআর্টজনিত হয়।
উত্তর:
এমনকি আপনার কোষগুলির জন্য নির্দিষ্ট প্রস্থ নির্ধারণ করতে হবে না, table-layout: fixedকোষগুলিকে সমানভাবে ছড়িয়ে দেওয়ার জন্য যথেষ্ট।
ul {
width: 100%;
display: table;
table-layout: fixed;
border-collapse: collapse;
}
li {
display: table-cell;
text-align: center;
border: 1px solid hotpink;
vertical-align: middle;
word-wrap: break-word;
}<ul>
<li>foo<br>foo</li>
<li>barbarbarbarbar</li>
<li>baz</li>
</ul>নোট করুন যে
table-layoutটেবিল স্টাইলযুক্ত উপাদানটির জন্য প্রস্থের সেট থাকতে হবে (আমার উদাহরণে 100%)।
word-wrap:break-wordএই সমস্যাটি ঠিক করবে, যেমনটি আমি সবেমাত্র আবিষ্কার করেছি
মাত্র শতাংশ প্রস্থ এবং নির্দিষ্ট টেবিল বিন্যাস ব্যবহার করুন :
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
সঙ্গে
table { table-layout: fixed; }
td { width: 33%; }
ফিক্সড টেবিল লেআউটটি গুরুত্বপূর্ণ যেমনটি নাহলে ব্রাউজারটি প্রস্থগুলি যথাযথভাবে মাপসই করা না হলে এটি প্রস্থগুলিকে সামঞ্জস্য করবে ie
স্পষ্টতই, আপনার পরিস্থিতিতে ফিট করার জন্য সিএসএস সামঞ্জস্য করুন, যার অর্থ সাধারণত একটি নির্দিষ্ট ক্লাসের সাথে সম্ভবত কোনও প্রদত্ত আইডির সাহায্যে কেবল স্টাইলিং প্রয়োগ করা হয়।
tdকারণ আপনার কলামগুলির গতিশীল সংখ্যা থাকতে পারে ... এবং এটি এটি ছাড়াই কার্যকর হয়।
ব্যবহার table-layout: fixedএকটি সম্পত্তি হিসেবে tableএবং width: calc(100%/3);জন্য td( অভিমানী সেখানে 3 tdএর )। এই দুটি বৈশিষ্ট্য সেট করা থাকলে, টেবিলের ঘরগুলি আকারে সমান হবে ।
পড়ুন ডেমো ।