একটি টেবিল সারি প্যাডিং

Question 1

<html>
    <head>
        <title>Table Row Padding Issue</title>
        <style type="text/css">
            tr {
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td>
                        <h2>Lorem Ipsum</h2>
                        <p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet
                        neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse 
                        platea dictumst. Nullam elit enim, gravida eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed 
                        tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae 
                        mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor luctus vitae euismod purus 
                        hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non 
                        scelerisque.</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

প্যাডিংয়ের মতো দেখতে এখানে। ভিতরে টিডি কীভাবে প্রভাবিত হয় না তা দেখুন। সমাধান কি? সারণি সারি প্যাডিং ইস্যু

Question 2

কৌশলটি tdউপাদানগুলিতে প্যাডিং দেওয়া , তবে প্রথমটির জন্য ব্যতিক্রম করা (হ্যাঁ, এটি হ্যাকি, তবে কখনও কখনও আপনাকে ব্রাউজারের নিয়ম অনুসারে খেলতে হয়):

td {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;   
}

td:first-child {
  padding-left:20px;
  padding-right:0;
}

প্রথম-শিশু তুলনামূলকভাবে ভাল সমর্থিত: https://developer.mozilla.org/en-US/docs/CSS/:first-child

আপনি অনুভূমিক প্যাডিং ব্যবহার করে একই যুক্তি ব্যবহার করতে পারেন tr:first-child td।

বিকল্পভাবে, অপারেটরটি ব্যবহার করেnot প্রথম কলামটি বাদ দিন । যদিও এটির পক্ষে সমর্থন এখনই ততটা ভাল নয়।

td:not(:first-child) {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;       
}

Question 3

ইন সিএসএস 1 ও সিএসএস 2 উল্লেখ, প্যাডিং সহ সব উপাদানের জন্য উপলব্ধ ছিল <tr>। তবুও টেবিল-সারি ( <tr>) এর জন্য প্যাডিংয়ের সমর্থন সিএসএস 2.1 এবং সিএসএস 3 স্পেসিফিকেশনে সরানো হয়েছে । আমি এই বিরক্তিকর পরিবর্তনের পিছনে কারণ খুঁজে পাইনি যা মার্জিন সম্পত্তি এবং কয়েকটি অন্যান্য সারণী উপাদান (শিরোনাম, পাদলেখ এবং কলাম )গুলিকেও প্রভাবিত করে।

আপডেট করুন: ফেব্রুয়ারী 2015 সালে, এই থ্রেড উপর www-style@w3c.orgমেইলিং লিস্ট সারণীর-সারিতে প্যাডিং এবং সীমান্ত সমর্থনে যোগ সম্পর্কে আলোচনা করেছেন। এটি স্ট্যান্ডার্ড বক্স মডেলটি টেবিল-সারি এবং টেবিল-কলামের উপাদানগুলিতেও প্রয়োগ করবে। এটি যেমন উদাহরণ অনুমতি দেয় । থ্রেডটি মনে করে যে টেবিল-সারি প্যাডিং সমর্থনটি সিএসএস স্ট্যান্ডার্ডগুলিতে কখনই বিদ্যমান ছিল না কারণ এতে জটিল লেআউট ইঞ্জিন থাকবে। 30 সেপ্টেম্বর 2014 সিএসএস বেসিক বক্স মডেলের সম্পাদকীয় খসড়াতে , সারণী-সারি এবং সারণী-কলামের উপাদানগুলি সহ সমস্ত উপাদানগুলির জন্য প্যাডিং এবং সীমানা বৈশিষ্ট্য বিদ্যমান। যদি শেষ পর্যন্ত এটি ডব্লিউ 3 সি সুপারিশ হয়ে যায় তবে আপনার এইচটিএমএল + সিএসএস উদাহরণটি শেষ পর্যন্ত ব্রাউজারগুলিতে লক্ষ্য হিসাবে কাজ করতে পারে।

Question 4

টিডি প্যাডিং দিন

Question 5

বিকল্প 1

আপনি সারি (টিআর) এর মতো স্বচ্ছ সীমানা যুক্ত করেও এটি সমাধান করতে পারেন

এইচটিএমএল

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

সিএসএস

tr {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

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

বিকল্প 2

যেহেতু সারিগুলি গ্রুপ কোষে যাওয়ার উপায় হিসাবে কাজ করে, তাই করার সঠিক উপায়টি ব্যবহার করা হবে

table {
    border-collapse: inherit;
    border-spacing: 0 10px;
}

Question 6

এটি একটি অতি পুরানো পোস্ট, তবে আমি ভেবেছিলাম যে সাম্প্রতিক সময়ে আমার सामना করা একই ধরণের সমস্যার সমাধান আমার পোস্ট করা উচিত।

উত্তর : আমি প্রদর্শনের মাধ্যমে এই সমস্যা সমাধান করা TR হিসেবে উপাদান ব্লক উপাদান অর্থাত একটি সিএসএস উল্লেখ ব্লক: ডিসপ্লে জন্য TR উপাদান। আপনি নীচের কোড নমুনায় এটি দেখতে পারেন।

<style>
  tr {
    display: block;
    padding-bottom: 20px;
  }
  table {
    border: 1px solid red;
  }
</style>
<table>
  <tbody>
    <tr>
      <td>
        <h2>Lorem Ipsum</h2>
        <p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse platea dictumst. Nullam elit enim, gravida
          eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor
          luctus vitae euismod purus hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non scelerisque.
        </p>
      </td>
    </tr>
  </tbody>
</table>
<br>
<br>This TEXT IS BELOW and OUTSIDE the TABLE element. NOTICE how the red table border is pushed down below the end of paragraph due to bottom padding being specified for the tr element. The key point here is that the tr element must be displayed as a block
in order for padding to apply at the tr level.

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

Question 7

আপনি কেবল এই স্টাইলটি টেবিলের সাথে যুক্ত করতে পারেন।

table {
    border-spacing: 15px;
}