TBODY উপাদানগুলির মধ্যে কীভাবে ফাঁক রাখবেন

Question

আমার এই মত একটি টেবিল আছে:

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

আমি প্রতিটি টডি এলিমেন্টের মধ্যে কিছু ফাঁক রাখতে চাই, তবে প্যাডিং এবং মার্জিনের কোনও প্রভাব নেই। কোন ধারনা?

Comments

'টডি' ট্যাগগুলি পুনরাবৃত্তি করা কি ঠিক? । কি আমি সবসময় দেখেছি সব "<TR> .. </ TR>" একটি একক "tbody 'ট্যাগ ভিতরে হয়

— Saneef

হ্যাঁ এটি বৈধ। অনুমানটি বলে: <! এলিমেন্ট টেবিল - - (ক্যাপশন ?, (কল * | কলেজগ্রুপ *), থ্যাড ?, টিফুট ?, টিবিডি +)> এর অর্থ এক বা একাধিক টিবিডি থাকতে হবে। w3.org/TR/html4/struct/tables.html#h-11.2.1

— নিকফ

Answer 1

আপনার যদি সীমানা না থাকার বিষয়ে আপত্তি না থাকে তবে এটি চেষ্টা করুন।

<style>
table {
  border-collapse: collapse;
}

table tbody {
  border-top: 15px solid white;
}
</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Comments

সীমানা শীর্ষ চেষ্টা করুন: 15px কঠিন স্বচ্ছ;

— স্টিভ আলমন্ড

এটি চাপ দিতে চেয়েছিলেন। transparentসীমানা রঙ হিসাবে ব্যবহার করুন । @ স্টিভএলমন্ড কী বলেছে।

— iheartchaharp

যদি টেবিল / টিডি / টিআর / টিডি একটি পটভূমি transparentবর্ণ ধারণ করে, সীমানার রঙটিকে সেট করে এমন উপাদানটির ব্যাকগ্রাউন্ড-রঙ দেবে, যা মূলত উপাদানটির শরীর থেকে উদ্বেগজনক।

— প্যাসি

Answer 2

আপনার ব্রাউজার সমর্থন প্রয়োজনীয়তার উপর নির্ভর করে এরকম কিছু কাজ করবে:

tbody::before
{
  content: '';
  display: block;
  height: 15px;

}

Comments

এটি তখনই সমাধান হয় যখন আপনার কক্ষগুলির এমন পটভূমি থাকে যেখানে স্থানটি থাকা উচিত নয় works

— লারাড্ডা

এটি আমার পক্ষে ভাল কাজ করেছে। কোন ত্রুটি আছে? এছাড়াও, দুটি কলোন কেন?

— এনএইচ 2

দুর্দান্ত সমাধান। সবকিছু অ্যাক্সেসযোগ্য রাখে!

— জেসন টি ফেদারিংহাম

@ এনএইচ 2: ডাবল-কলোনগুলি সিউডো-সামগ্রী এবং সিঙ্গল-কোলন সিউডো-নির্বাচকদের জন্য। এটি সিএসএস সিনট্যাক্সের একটি আপডেট। সবকিছু কেবলমাত্র একক কোলন ব্যবহার করতে ব্যবহৃত হয়। পুরানো ব্রাউজারগুলি ডাবল কোলন সমর্থন করে না (যেমন, আই <= 8)।

— dbmikus

এটি ব্যবহার করা display: table-row;কি নিরাপদ নয় ?

— রাচেল

Answer 3

কোনও পৃষ্ঠা বিন্যাস করতে খালি সারণী উপাদানগুলি ব্যবহার করার বিষয়ে লোকেরা সর্বদা বিতর্কিত মতামত রাখবে (এই উত্তরের নীচের অংশে প্রমাণ হিসাবে) আমি এটি স্বীকার করেছি, তবে আপনি যখন " দ্রুত এবং নোংরা " উপায়ে কাজ করছেন তখন কখনও কখনও তাদের এভাবে ব্যবহার করা সহজ হয় ।

আমি বিগত প্রকল্পগুলিতে খালি সারিগুলি টেবিল সারিগুলির স্পেস গ্রুপগুলিতে ব্যবহার করেছি। আমি স্পেসার সারিগুলিকে তাদের নিজস্ব সিএসএস শ্রেণিকে বরাদ্দ করেছি এবং সেই শ্রেণীর জন্য একটি উচ্চতা নির্ধারণ করেছি যা সেই গোষ্ঠীর টেবিল সারিগুলির জন্য শীর্ষ এবং নীচের মার্জিন হিসাবে কাজ করে।

    .separator{
             height: 50px;
    }

   <table>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
   </table>

যদি আপনার টেবিল কোষগুলিতে সীমানা না থাকে তবে আপনি আপনার স্টাইল শীটে আপনার সাধারণ সেল বা সারিটির উচ্চতাও নির্ধারণ করতে পারেন যা আপনার টেবিলের সমস্ত সারি সমানভাবে ফাঁক করে দেয়।

tr{
   height: 40px;
}

Comments

ভাল যদি আপনি অতিরিক্ত মার্কআপ যুক্ত করতে যাচ্ছেন, তবে কেন প্রতিটি টবিকের প্রথম সারিতে একটি ক্লাস রাখবেন না?

— নিকফ

ঠিক আছে, কারণ এটি হতে পারে যে সারিগুলি কোড উত্পন্ন হয় এবং মার্কআপে একটি পৃথক সারি যুক্ত করা উত্পন্ন সামগ্রীর প্রথম সারির জন্য একটি বিশেষ কেস তৈরি করার চেয়ে আরও রক্ষণাবেক্ষণযোগ্য হতে পারে।

— রোল্ফ রান্ডার

আপনি যা চান তার সবই কমিয়ে দিন, তবে এটি হ'ল একমাত্র সমাধান হ'ল - এবং এমনকি এটি বিচ্ছিন্নতা লঙ্ঘন করলেও একটি খালি সারি কোনও চুক্তি আইএমওর চেয়ে বড় নয়।

— এক্সকিপার

ত্রুটি ছাড়া আমার বাট! এটিতে একটি স্ক্রিনরেডার ব্যবহার করে চেষ্টা করুন এবং ভুল সারি গণনা লক্ষ্য করুন। আরও ভাল, একটি স্প্রেডশিটে টেবিলটি অনুলিপি করে আটকানোর চেষ্টা করুন। আপনার কাছে প্রচুর সামগ্রী থাকলে আপনি কয়েক ঘন্টা পুনরায় ফর্ম্যাট করতে পারবেন। টেবিলগুলি বোঝানো হয় ডেটা প্রদর্শন করার জন্য (এবং চূড়ান্তভাবে অ্যাক্সেসযোগ্য হতে হবে), বিভাগগুলির মধ্যে উপস্থাপনা শিম নয়।

— জেসন টি ফেদারিংহাম

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

— পাওয়েল-কুজনিক

Answer 4

আমি কষ্ট ব্যবধান সঠিকভাবে একাধিক হয়েছে <tbody>সঙ্গে ::beforeছদ্ম, উপস্থিতিতে <tr>ধারণকারী <td>ব্রাউজার কয়েক rowspan সঙ্গে।

মূলত, আপনার যদি এর <tbody>মতো কাঠামোগত থাকে:

<tbody>
    <tr>
        <td>td 1</td>
        <td rowspan"2">td 2</td>
        <td>td 3</td>
        <td>td 4</td>
    </tr>
    <tr>
        <td>td 1</td>
        <td>td 2</td>
        <td>td 4</td>
    </tr>
</tbody>

এবং আপনি অনুসরণ করেন যে এইভাবে ::beforeসিউডো এলিমেন্টে সিএসএস লেখার পরামর্শ দেয় :

tbody::before
{
    content: '';
    display: block;
    height: 10px;
}

এটি সারি-স্প্যানকে প্রভাবিত করবে, দ্বিতীয়টির মধ্যে "হারানো" টেবিল তৈরি করবে যে প্রথমটিতে <tr>কতগুলি <td>স্পস্পান উপস্থিত রয়েছে।

সুতরাং, যদি কেউ এই ধরণের সমস্যার মুখোমুখি হন তবে সমাধানটি ::beforeএইভাবে সিউডো স্টাইল করা :

tbody::before
{
    content: '';
    display: table-row;
    height: 10px;
}

এখানে একটি ঝাঁকুনি

Answer 5

এখানে আরও একটি সম্ভাবনা রয়েছে যা নির্ভর করে: প্রথম বাচ্চা যা সমস্ত ব্রাউজারগুলিতে পাওয়া যায় না:

<style>
table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

tbody tr:first-child td {
  padding-top: 15px;
}

</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Comments

বাক্স-ছায়া, পটভূমি চিত্র বা অন্য যে কোনও কিছুর মতো কক্ষের আকারের সাথে সম্পর্কিত সামগ্রীর অবস্থানের উপর নির্ভর করতে যদি এমন কিছু ঘটে থাকে তবে এইটি খুব ভাল কাজ করবে না।

— এক্সকিপার

গুগলে এই উত্তরটি অনুসন্ধান করার জন্য অন্যদের জন্য কেবল স্পষ্ট করার জন্য, আমি অনুমান করি যে এটি ২০০৮ সালে লেখা হয়েছিল, এই উত্তরটির এখন (২০১৫) সমস্ত বড় ব্রাউজার জুড়ে সম্পূর্ণ সমর্থন রয়েছে? কমপক্ষে caniuse.com এ প্রথম সন্তানের চেক করা ভাল মনে হয়?

— redfox05

Answer 6

ঠিক displayহিসাবে সেট করুন blockএবং এটি কাজ করবে।

table tbody{
    display:block;
    margin-bottom:10px;
    border-radius: 5px;
}

Comments

এই উত্তরটি গ্রহণযোগ্য উত্তর হওয়া উচিত কারণ কেবলমাত্র এটিই "সীমান্ত" কলামগুলির সাথে সীমান্তবর্তী টডি ব্যবহার করতে দেয়।

— রোবসনরোসা

display:blockটবি উপাদানগুলির মধ্যে কলাম প্রান্তিককরণ ভেঙে দেয়। আপনি আর সারণী বিন্যাস ইঞ্জিনটির সুবিধা পাবেন না

— এম কনরাড

Answer 7

উপরে বর্ণিত সমস্ত উত্তরগুলির মধ্যে, কেবলমাত্র জেনসন 47 এর উত্তরগুলি উপস্থাপনা এবং সামগ্রীর পৃথকীকরণ ধরে রাখে । ধসে পড়া সীমানা মডেল পদ্ধতির অপূর্ণতা হ'ল পৃথক কক্ষগুলি পৃথক করতে আপনি আর সারণির সীমানা বা সেলস্পেসিং বৈশিষ্ট্যগুলি ব্যবহার করতে পারবেন না । আপনি যুক্তি দিতে পারেন যে এটি একটি ভাল জিনিস, এবং কিছু কর্মক্ষেত্র রয়েছে, তবে এটি ব্যথা হতে পারে। সুতরাং আমি মনে করি প্রথম সন্তানের পদ্ধতিটি সবচেয়ে মার্জিত।

বিকল্পভাবে, আপনি আপনার টিবিডিওয়াই ক্লাসের ওভারফ্লো সম্পত্তি "দৃশ্যমান" ব্যতীত অন্য যে কোনও কিছুতেও সেট করতে পারেন । এই পদ্ধতিটি আপনাকে পৃথক সীমানা মডেলটি ধরে রাখতেও সহায়তা করে:

<style>
tbody {
    overflow: auto;
    border-top: 1px solid transparent;
}
</style>
<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Comments

আমি অনুরূপ কিছু করার সন্ধান করছিলাম, এটি আমার জন্য উপযুক্ত

— ইরানান্ট

Answer 8

প্যাডিং টিডির ক্ষেত্রে প্রয়োগ করা যেতে পারে, আপনি + চিহ্ন সহ একটি কৌশল করতে পারেন। তারপরে কোনও ব্যক্তির প্রথম টিআরের টিডির শীর্ষ প্যাডিং দেওয়া সম্ভব হবে:

// The first row will have a top padding
table tbody + tbody tr td {
    padding-top: 20px;
}

// The rest of the rows should not have a padding
table tbody + tbody tr + tr td {
    padding-top: 0px;
}

আমি "tbody + tbody" যুক্ত করেছি যাতে প্রথম টিডির উপরের প্যাডিং না থাকে। তবে, এটি প্রয়োজন হয় না।

আমি যতদূর জানি কোনও অসুবিধা নেই :), যদিও পুরানো ব্রাউজারগুলি পরীক্ষা করে নি।

Answer 9

আপনি border-spacingএই গোষ্ঠীগুলির মধ্যে একটি স্থান যুক্ত করতে টেবিল সারি গোষ্ঠীগুলির সাথে একটি সারণীতে ব্যবহার করতে পারেন । যদিও, আমি মনে করি না যে কোন গ্রুপগুলি ব্যবধানযুক্ত এবং কোনটি নয় তা নির্দিষ্ট করার কোনও উপায় আছে।

<table>
  <thead>
    ...
  </head>
  <tbody>
    ...
  </tbody>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

সিএসএস

table {
  border-spacing: 0px 10px; /* h-spacing v-spacing */
}

Answer 10

নতুন উত্তর

আপনি নিজের পছন্দমতো <tbody>ট্যাগ ব্যবহার করতে পারেন। আমি এখনও বুঝতে পারি নি যে ডাব্লু 3 সি ঠিক আছে কিনা। আমার নীচের সমাধানটি কাজ করে না তা বলার নয় (এটি করে) তবে আপনি যা করার চেষ্টা করছেন তা করতে, আপনার <tbody>ট্যাগ ক্লাস বরাদ্দ করুন এবং তারপরে <td>সিএসএসের মাধ্যমে তাদের পৃথক ট্যাগগুলি উল্লেখ করুন :

table tbody.yourClass td {
    padding: 10px;
}

এবং আপনার এইচটিএমএল এইভাবে:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody class="yourClass">    
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

লোকটিকে চেষ্টা করে দেখুন :)

পুরানো উত্তর

আপনি যা-ই করুন না কেন ফাঁকা সারি সন্নিবেশ করানো হবে না ...

আপনার টেবিলে আপনার 1 টিরও বেশি উপাদান থাকা উচিত নয়। আপনি যা করতে পারেন তা হ'ল আপনার <tr>উপাদানগুলিতে শ্রেণি বা আইডি গুণাবলী সেট করুন এবং তাদের সম্পর্কিত <td>ট্যাগগুলি প্যাডিং দিন:

table {
    border-collapse: collapse;
}

tr.yourClass td {
    padding: 10px;
}

এমনকি আপনি উপরের এবং নীচের <tr>একটি অতিরিক্ত শ্রেণি নির্ধারণ করতে পারেন যাতে তারা যথাক্রমে কেবল শীর্ষ বা নীচের প্যাডিং করে:

tr.yourClass.topClass td {
    padding: 10px 0 0 0;
}

tr.yourClass.bottomClass td {
    padding: 0 0 10px 0;
}

এবং আপনার এইচটিএমএলতে, আপনার <tr>ট্যাগটি দেখতে এমন হবে:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr class="yourClass topClass"><td>Text</td></tr>
<tr class="yourClass"><td>Text</td></tr>
<tr class="yourClass bottomClass"><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

আশাকরি এটা সাহায্য করবে!

Answer 11

djensen47 উত্তরটি নতুন ব্রাউজারগুলির জন্য দুর্দান্ত কাজ করে, তবে এটি যেমন উল্লেখ করা হয়েছিল, আই 7 এটি কাজ করে না।

পুরানো ব্রাউজারগুলিকে সমর্থন করার জন্য এই সমস্যাটির জন্য আমার কাজটি হ'ল প্রতিটি কোষের বিষয়বস্তু একটি ডিভের মধ্যে আবদ্ধ করা। তারপরে ডিভের সাথে একটি মার্জিন-টপ যুক্ত করুন।

<table class="tbl">
<tr></tr>
<tr></tr>
<tr></tr>
<tr><td><div></div></td></tr>
</table>

সিএসএস

.tbl tr td div {
    height:30px;
    margin-top:20px;
}

উচ্চতার সেটিংটি ডিভের অভ্যন্তরে ব্যবহৃত কোনও সেল রঙিনকে পাঠ্যের চারপাশে fromালতে থেকে রোধ করতে কোষগুলিকে কমপক্ষে 30px উচ্চ রাখে। মার্জিন-শীর্ষটি পুরো সারিটি লম্বা করে কাঙ্ক্ষিত স্থান তৈরি করে।

Answer 12

আমি নিজেই এটি সমাধান করার চেষ্টা করতে পেরেছি। <br>ক্লোজিং </tbody>ট্যাগের ঠিক আগে একটি ট্যাগ লাগাতে আমার সাফল্য ছিল । এটি সম্পূর্ণরূপে ভিজ্যুয়াল ফিক্স, তবে আমি পরীক্ষিত বেশিরভাগ ব্রাউজারে কাজ করে বলে মনে হচ্ছে।

<table>
    <tbody>
        <tr>
            <td></td>
        </tr>
        <br>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

পাশাপাশি অ্যাক্সেসযোগ্য হতে হবে।

Answer 13

যারা প্রথমে উত্তর দিয়েছিল তাদের প্রত্যেককে কৃতিত্বের সাথে ...

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 50%;
}
tbody:before {
  content: "";
  display:block;
  border-top: 15px solid white;
}
tbody tr {
  border-color: #000;
  border-style: solid;
}
tbody tr:first-of-type{
  border-width: 2px 2px 0 2px;
}
tbody tr:nth-of-type(1n+2){
  border-width: 0 2px 0 2px;
}
tbody tr:last-of-type{
  border-width: 0 2px 2px 2px;
}
tbody tr:nth-child(odd) {
  background-color: #ccc;
}
tbody tr:hover {
  background-color: #eee;
}
td {
  text-align: right;
}

<table>
  <tbody>
    <tr>
      <th colspan="3">One</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Two</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>