CSS টেবিল-সেল সমান প্রস্থ

Question

আমার একটি টেবিলের ধারকটির অভ্যন্তরে টেবিল-সেল উপাদানগুলির একটি অনির্দিষ্ট সংখ্যক রয়েছে।

<div style="display:table;">
  <div style="display:table-cell;"></div>
  <div style="display:table-cell;"></div>
</div>

তাদের মধ্যে আলাদা আলাদা আকারের সামগ্রী থাকা সত্ত্বেও কি টেবিল-কোষগুলি সমান প্রস্থে পাওয়ার জন্য খাঁটি সিএসএস উপায় আছে?

ধন্যবাদ।

সম্পাদনা করুন: আপনার মনে হয় আপনার কতগুলি কক্ষ রয়েছে তা জানার জন্য সর্বাধিক প্রস্থ থাকা উচিত?

Comments

কলামগুলির সংখ্যা কীভাবে নির্ধারণ করা হয়: ক্লায়েন্ট বা সার্ভার পাশ?

— iambriansreed

আমি কয়েকটি পদ্ধতির চেষ্টা করার পরে, আমি মনে করি আপনি যদি একাধিক সারি রাখতে চান এবং সেগুলি সমান প্রস্থের চান, সারণির পরিবর্তে ফ্লেক্সবক্স ব্যবহার করুন

— এরিক

Answer 1

এখানে অবিরাম সংখ্যক কোষ সহ একটি কার্যক্ষম ফিডল রয়েছে: http://jsfiddle.net/r9yrM/1/

আপনি প্রতিটি পিতামাতার div( টেবিল ) একটি প্রস্থ স্থির করতে পারেন , অন্যথায় এটি যথারীতি 100% হয়ে যাবে।

ট্রিকটি হ'ল table-layout: fixed;এটির ট্রিগার করতে প্রতিটি কক্ষের কিছু প্রস্থ এবং কিছু প্রস্থ এখানে 2%। এটি অন্য টেবিল অ্যালগরিদমকে ট্রিগার করবে , এটি যেখানে ব্রাউজারগুলি নির্দেশিত দিকগুলির সম্মান করতে খুব চেষ্টা করে।
দয়া করে ক্রোম (এবং IE8- যদি প্রয়োজন হয়) দিয়ে পরীক্ষা করুন। এটি সাম্প্রতিক সাফারি সহ ঠিক আছে তবে আমি তাদের সাথে এই কৌশলটির সামঞ্জস্যতা মনে করতে পারি না।

সিএসএস (প্রাসঙ্গিক নির্দেশাবলী):

div {
    display: table;
    width: 250px;
    table-layout: fixed;
}

div > div {
    display: table-cell;
    width: 2%; /* or 100% according to OP comment. See edit about Safari 6 below */
}

সম্পাদনা (2013): ওএস এক্স-এ সাফারি 6 থেকে সাবধান থাকুন, এটি table-layout: fixed; ভুল (বা অন্য ব্রাউজারগুলির থেকে খুব আলাদা, খুব আলাদা I বিভিন্ন ফলাফলের জন্য প্রস্তুত থাকুন।

Comments

ধন্যবাদ, এটি উত্তর মত মনে হচ্ছে। কেন জানি না তবে আমি যদি প্রস্থটি 2% এ সেট করি তবে এটি প্রতিটি কলামকে 2% এ স্ক্রুন করে। তবে 100% দুর্দান্ত কাজ করছে বলে মনে হচ্ছে। কোন ধারণা কি হচ্ছে সেখানে?

— হ্যারি

আমি টেবিল-কোষগুলিতে 100% প্রস্থ ব্যবহার করার প্রয়োজনের একই সমস্যার মধ্যে পড়েছিলাম। প্রদর্শন: টেবিল সহ পিতামণ্ডলের উপাদানগুলিতে একটি ক্লিয়ারফিক্স প্রয়োগ করার কারণে এটি ঘটছিল। যেহেতু 100% প্রস্থের কক্ষগুলি IE8 এ কাজ করে না, তাই আমার জন্য স্থির ছিল ক্লিয়ারফিক্সটি সরিয়ে ফেলা। আশা করি এটি কাউকে সাহায্য করবে।

— অ্যালেক্স ব্যারেট

এই প্রসারিত করতে, সহজ লেআউট (1x1, 2x2, 3x3, ইত্যাদি) কিন্তু জটিল বিন্যাস (1x3x1, 1x2x3x4, ইত্যাদি) জন্য এই কাজ অতিরিক্ত প্রয়োজন divs এর সাথে display:tableব্যবহার করা যেন তারা সারি ছিল না display:tabl-rowকিছু আশা করতে পারে না। উদাহরণ এখানে ।

— ফিলোক্সো

100% প্রস্থ আইই 8 (আশ্চর্য) এ কাজ করে না তবে 2% এর প্রাথমিক পরামর্শটি সঠিক ফলাফল সরবরাহ করে।

100% প্রস্থ এছাড়াও আই 10 তে কাজ করে নি। এটা তোলে করেনি IE11 করছি না। এবং 1% প্রস্থের মোবাইল সাফারি সুপার সরু কলামগুলি দেখায়। সুতরাং আমি আই এস 9 এবং আই 10 কে লক্ষ্য করে একটি সিএসএস হ্যাক ব্যবহার করে শেষ করেছি: .my-cell { width: 100%; }; @media screen and (min-width:0\0) { .my-cell { width: 1%; } }সিএসএস হ্যাকটি এখান থেকে এসেছে: stackoverflow.com/a/24321386/6962

— হেনরিক এন

Answer 2

এইচটিএমএল

<div class="table">
    <div class="table_cell">Cell-1</div>
    <div class="table_cell">Cell-2 Cell-2 Cell-2 Cell-2Cell-2 Cell-2</div>
    <div class="table_cell">Cell-3Cell-3 Cell-3Cell-3 Cell-3Cell-3</div>
    <div class="table_cell">Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4Cell-4</div>
</div>​

সিএসএস

.table{
    display:table;
    width:100%;
    table-layout:fixed;
}
.table_cell{
    display:table-cell;
    width:100px;
    border:solid black 1px;
}

ডেমো।

Comments

ফিডাল এখানে কাজ করে না। কোষগুলি সর্বদা 25% থাকে।

— নেটঅ্যাকশন

এই সমাধানটি গতিশীল কোনও কিছুর জন্য খুব স্কেলযোগ্য নয়, যেমন ক্লায়েন্ট দ্বারা নিয়ন্ত্রিত সাইট নেভিগেশন।

— এরিক কে

সম্ভবত আপনি সঠিক এবং বিটিডব্লিউ, এটি প্রায় দুই বছরের পুরানো আনসার @ কোয়ান্টামডাইনামিক্স। মনে আরও ভাল কিছু আছে? কেন শুধু আপনার ধারণাটি ভাগ করে নেবেন না, বিশ্বকে আরও ভাল জিনিসগুলি জানুন :-)

— আলফা

Answer 3

শুধু ব্যবহার max-width: 0মধ্যে display: table-cellউপাদান আমার জন্য কাজ:

.table {
  display: table;
  width: 100%;
}

.table-cell {
  display: table-cell;
  max-width: 0px;
  border: 1px solid gray;
}

<div class="table">
  <div class="table-cell">short</div>
  <div class="table-cell">loooooong</div>
  <div class="table-cell">Veeeeeeery loooooong</div>
</div>

Comments

এখানে শুধু নিটপিকিং করা 0pxহচ্ছে তবে এটি কোনও বৈধ ইউনিট নয়। এটা ঠিক হওয়া উচিত 0।

— গ্যাভিন

এটি আমার পক্ষে কাজ করেছে, তবে আপনি কী ব্যাখ্যা করতে পারেন যে এটি কীভাবে কাজ করে?

— এমানুয়াল

Answer 4

প্রতিস্থাপন করা

  <div style="display:table;">
    <div style="display:table-cell;"></div>
    <div style="display:table-cell;"></div>
  </div>

সঙ্গে

  <table>
    <tr><td>content cell1</td></tr>
    <tr><td>content cell1</td></tr>
  </table>

ডিভগুলি টেবিলের মতো সম্পাদন করার চেষ্টা করার চারপাশের সমস্ত সমস্যা দেখুন। তাদের সারণী বিন্যাসের নকল করতে টেবিল-এক্সএক্সএক্সএক্স যোগ করতে হয়েছিল

টেবিলগুলি সমর্থিত এবং সমস্ত ব্রাউজারে খুব ভাল কাজ করে। কেন তাদের খাদের? সত্য যে তারা তাদের নকল করতে হয়েছিল তার প্রমাণ তারা তাদের কাজ এবং ভাল করেছেন।

আমার মতে কাজের জন্য সেরা সরঞ্জামটি ব্যবহার করুন এবং আপনি যদি টেবুলেটেড ডেটা বা টেবুলেটেড ডেটা টেবিলের সাদৃশ্যপূর্ণ কিছু চান তবে কেবল কাজ করুন।

খুব দেরিতে জবাব আমি জানি তবে ভয়েস করার মতো।

Comments

+1 কারণ এটি কাজ করে এবং সিএসএস এখনও থাকায় 2014 এ সমস্ত ব্রাউজারে এটি সঠিকভাবে করে না।

— ইয়াক

কখনও কখনও আপনি টেবিলুলেটেড ডেটা নয় এমন জিনিসের জন্য টেবিলের মতো লেআউট চান। যা ব্যবহার করা উচিত যেমন গৌণ উপাদান <nav>, <ul>ইত্যাদি

— বেন

প্রতিক্রিয়াশীল জন্য এটি একটি ডিভ ভিত্তিক লেআউট থাকা আদর্শ। মোবাইল ডিভাইসে টেবিলগুলি প্রদর্শন করা পাছার ব্যথা।

— পাবলো রিনকন

একটি সারণী অনুকরণ করার চেষ্টা করা প্রতিক্রিয়াশীল নকশাকে বাদ দেয়। আপনি যদি প্রতিক্রিয়াশীল ডিজাইন চান তবে আমি সম্মত, সারণীগুলি পছন্দ নয় not

— বিকাশকারী

টেবুলার ডেটা প্রদর্শনের জন্য টেবিলগুলি তৈরি করা হয়েছিল: এটি ছিল, এটি ছিল এবং এটি এইচটিএমএল উপাদানগুলি ট্যাবুলার ডেটা প্রদর্শনের জন্য ব্যবহার করা হবে, কেন কেউ তাদের খনন করবে (সেই উদ্দেশ্যে)? সারণী বিন্যাসটি নকল করা হয়নি : এটি এখন কিছু সময়ের জন্য CSS2 পুনঃসংশোধনের অংশ হয়ে গেছে এবং এটি ঘটে যায় যে এইচটিএমএল টেবিলগুলির ডিফল্ট বিন্যাসটি display: table-etc(বেশ স্বাভাবিকভাবেই)। আমি আমার দিনগুলি লিংকগুলি ডিভিড বা ডিভস নকল করে টেবিল, স্প্যান বা ইনপুটগুলি নকল করি না: আমি কেবল স্টাইলিংয়ের জন্য সিএসএস ব্যবহার করছি। শেষ displayঅবধি, টেবিল, ট্রা, টিডি উপাদানগুলিতে সম্পত্তির অন্য কোনও মান প্রয়োগ করার জন্য আইই 9 এর সাথে সৌভাগ্য ।

— ফিলিপলস

Answer 5

এটি সবার জন্য কাজ করবে

<table border="your val" cellspacing="your val" cellpadding="your val" role="grid" style="width=100%; table-layout=fixed">
<!-- set the table td element roll attr to gridcell -->
<tr>
<td roll="gridcell"></td>
</tr>
</table>

এটি পুনরাবৃত্তি দ্বারা নির্মিত টেবিল ডেটার জন্যও কাজ করবে

Answer 6

আপনি এখানে যান:

http://jsfiddle.net/damsarabi/gwAdA/

আপনি প্রস্থ: 100px ব্যবহার করতে পারবেন না, কারণ প্রদর্শনটি টেবিল-সেল। তবে আপনি সর্বোচ্চ-প্রস্থ: 100px ব্যবহার করতে পারেন। তারপরে আপনার বাক্সটি কখনই 100px এর চেয়ে বড় হবে না। তবে আপনাকে ওভারফ্লো যুক্ত করতে হবে: প্রসঙ্গটি অন্য কোষে রক্তপাত না করে তা নিশ্চিত করার জন্য লুকানো। আপনি হোয়াইট-স্পেসও যুক্ত করতে পারেন: আপনি যদি উচ্চতা বৃদ্ধি থেকে বাড়িয়ে রাখতে চান তবে এখনই চাপুন।

Answer 7

এটি টেবিল-সেল স্টাইলটি সেট করে width: autoএবং সামগ্রী খালি করেই করা যায়। কলামগুলি এখন সমান-প্রশস্ত, তবে কোনও সামগ্রী নেই।

ঘরে কন্টেন্ট সন্নিবেশ করতে, divCSS সহ একটি যুক্ত করুন :

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;

position: relativeআপনার কোষগুলিতেও যুক্ত করা দরকার ।

এখন আপনি উপরের কথাবার্তাটিতে সত্যিকারের সামগ্রীটি রাখতে পারেন।

https://jsfiddle.net/vensdvvb/