সিএসএস টেবিল বিন্যাস: টেবিল-সারি কেন মার্জিন গ্রহণ করে না?

Question 1

.container {
  width: 850px;
  padding: 0;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.row {
  display: table-row;
  margin-bottom: 30px;
  /* HERE */
}
.home_1 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}
.home_2 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}
.home_3 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}
.home_4 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}

<div class="container">
  <div class="row">
    <div class="home_1"></div>
    <div class="home_2"></div>
    <div class="home_3"></div>
    <div class="home_4"></div>
  </div>

  <div class="row">
    <div class="home_1"></div>
    <div class="home_2"></div>
  </div>
</div>

স্নিপেট প্রসারিত করুন

আমার প্রশ্নটি সিএসএসে চিহ্নিত রেখার সাথে সম্পর্কিত HERE। আমি জানতে পেরেছি যে সারিগুলি একে অপরের খুব কাছাকাছি রয়েছে, তাই আমি তাদের আলাদা করতে নীচের মার্জিন যুক্ত করার চেষ্টা করেছি। দুর্ভাগ্যক্রমে এটি কার্যকর হয় না। সারিগুলি পৃথক করতে আমাকে টেবিলের কোষগুলিতে মার্জিন যুক্ত করতে হবে।

এই আচরণের পিছনে কারণ কী?

এছাড়াও, লেআউটিং সম্পাদন করার জন্য এই কৌশলটি ব্যবহার করা ঠিক কি:

[icon] - text      [icon] - text
[icon] - text      [icon] - text

বা এর চেয়ে ভাল কৌশল কী আছে?

Question 2

সিএসএস 2.1 মান, বিভাগ 17.5.3 দেখুন। আপনি যখন ব্যবহার করবেন তখন display:table-rowডিআইভির উচ্চতা সম্পূর্ণরূপে এর table-cellউপাদানগুলির উচ্চতা দ্বারা নির্ধারিত হয় । সুতরাং, এই উপাদানগুলির উপর মার্জিন, প্যাডিং এবং উচ্চতার কোনও প্রভাব নেই।

http://www.w3.org/TR/CSS2/tables.html

Question 3

চারপাশের কাজের জন্য এটি কীভাবে (প্রকৃত টেবিল ব্যবহার করে)?

table {
    border-collapse: collapse;
}

tr.row {
    border-bottom: solid white 30px; /* change "white" to your background color */
}

এটি ততটা গতিশীল নয়, যেহেতু আপনাকে স্পষ্টভাবে সীমানার রঙ নির্ধারণ করতে হবে (যদি না এর পাশ্ববর্তী কোনও উপায় না থাকে) তবে এটি আমার নিজের একটি প্রকল্পের জন্য যা পরীক্ষা-নিরীক্ষা করছি।

সম্পর্কিত মন্তব্য অন্তর্ভুক্ত সম্পাদনা করুনtransparent :

tr.row {
    border-bottom: 30px solid transparent;
}

Question 4

আমি যে নিকটতম জিনিসটি দেখেছি তা border-spacing: 0 30px;হ'ল ধারক ডিভিতে সেট করা। যাইহোক, এটি আমাকে কেবল টেবিলের উপরের প্রান্তে স্থান দিয়েছিল, যা উদ্দেশ্যকে পরাস্ত করে, যেহেতু আপনি মার্জিন-নীচে চেয়েছিলেন।

Question 5

আপনি কি নীচের মার্জিনটি .row divঅর্থাৎ আপনার "কোষগুলিতে" সেট করার চেষ্টা করেছেন ? আপনি যখন প্রকৃত এইচটিএমএল টেবিলগুলি নিয়ে কাজ করেন, আপনি সারিগুলিতেও মার্জিন সেট করতে পারবেন না - কেবলমাত্র কক্ষগুলিতে।

Question 6

এটির জন্য খুব সহজ ফিক্স রয়েছে, border-spacingএবং border-collapseসিএসএস বৈশিষ্ট্যগুলি কাজ করে display: table।

আপনার ঘরগুলিতে প্যাডিং / মার্জিন পেতে আপনি নিম্নলিখিতটি ব্যবহার করতে পারেন।

.container {
  width: 850px;
  padding: 0;
  display: table;
  margin-left: auto;
  margin-right: auto;
  border-collapse: separate;
  border-spacing: 15px;
}

.row {
  display: table-row;
}

.home_1 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}

.home_2 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}

.home_3 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}

.home_4 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}

<div class="container">
  <div class="row">
    <div class="home_1">Foo</div>
    <div class="home_2">Foo</div>
    <div class="home_3">Foo</div>
    <div class="home_4">Foo</div>
  </div>

  <div class="row">
    <div class="home_1">Foo</div>
    <div class="home_2">Foo</div>
  </div>
</div>

স্নিপেট প্রসারিত করুন

আপনার অবশ্যই থাকতে হবে তা নোট করুন

border-collapse: separate;

অন্যথায় এটি কাজ করবে না।

Question 7

ফিডল

 .row-seperator{
   border-top: solid transparent 50px;
 }

<table>
   <tr><td>Section 1</td></tr>
   <tr><td>row1 1</td></tr>
   <tr><td>row1 2</td></tr>
   <tr>
      <td class="row-seperator">Section 2</td>
   </tr>
   <tr><td>row2 1</td></tr>
   <tr><td>row2 2</td></tr>
</table>


#Outline
Section 1
row1 1
row1 2


Section 2
row2 1
row2 2

এটি অন্য সমাধান হতে পারে

Question 8

দুটি উপাদানের মধ্যে স্পেসার স্প্যান যুক্ত করুন, তারপরে এটি অদৃশ্য করে তুলুন:

<img src="#" />
<span class="spacer">---</span>
<span>Text TEXT</span>

.spacer {
    visibility: hidden
}

Question 9

কাজ - সারণীতে স্পেসিং যুক্ত করুন

#options table {
  border-spacing: 8px;
}

Question 10

আপনি যদি একটি নির্দিষ্ট মার্জিন যেমন 20px চান তবে আপনি টেবিলটি একটি ডিভের মধ্যে রাখতে পারেন।

<div id="tableDiv">
    <table>
      <tr>
        <th> test heading </th>
      </tr>
      <tr>
        <td> test data </td>
      </tr>
    </table>
</div>

সুতরাং # টেবিলডিভের 20px এর মার্জিন রয়েছে তবে টেবিলটি নিজেই 100% প্রস্থ রয়েছে, উভয় পক্ষের মার্জিন ব্যতীত টেবিলটিকে সম্পূর্ণ প্রস্থ হতে বাধ্য করে।

#tableDiv {
  margin: 20px;
}

table {
  width: 100%;
}

Question 11

ডিভসের মধ্যে একটি বিআর ট্যাগ যুক্ত করে কাজ করা। প্রদর্শিত দুটি ডিভের মধ্যে বিআর ট্যাগ যুক্ত করুন: পিতামাতার প্রদর্শন সহ সারণি-সারি: সারণী