html - tag - সিএসএস কি




<Div> ট্যাগ এবং CSS ব্যবহার করে কেবল কী টেবিল তৈরি করবেন (6)

আমি শুধুমাত্র <div> ট্যাগ এবং CSS ব্যবহার করে টেবিল তৈরি করতে চাই।

এই আমার নমুনা টেবিল।

<body>
  <form id="form1">
      <div class="divTable">
             <div class="headRow">
                <div class="divCell" align="center">Customer ID</div>
                <div  class="divCell">Customer Name</div>
                <div  class="divCell">Customer Address</div>
             </div>
            <div class="divRow">
                  <div class="divCell">001</div>
                <div class="divCell">002</div>
                <div class="divCell">003</div>
            </div>
            <div class="divRow">
                <div class="divCell">xxx</div>
                <div class="divCell">yyy</div>
                <div class="divCell">www</div>
           </div>
            <div class="divRow">
                <div class="divCell">ttt</div>
                <div class="divCell">uuu</div>
                <div class="divCell">Mkkk</div>
           </div>

      </div>
  </form>
</body>

এবং শৈলী:

<style type="text/css">
    .divTable
    {
        display:  table;
        width:auto;
        background-color:#eee;
        border:1px solid  #666666;
        border-spacing:5px;/*cellspacing:poor IE support for  this*/
       /* border-collapse:separate;*/
    }

    .divRow
    {
       display:table-row;
       width:auto;
    }

    .divCell
    {
        float:left;/*fix for  buggy browsers*/
        display:table-column;
        width:200px;
        background-color:#ccc;
    }
</style>

কিন্তু এই টেবিলটি IE7 এবং এর নিচে সংস্করণের সাথে কাজ করে না। দয়া করে আমার সমাধান এবং ধারণাগুলি আমার জন্য দিন। ধন্যবাদ।


আমি গ্রিড-সিএসএস বিবেচনা কোন উত্তর দেখতে পাচ্ছি না। আমি এটি একটি খুব মার্জিত পদ্ধতির মনে করি: গ্রিড-CSS এমনকি সারি এবং কলাম স্প্যান সমর্থন করে। এখানে আপনি একটি খুব ভাল নিবন্ধ খুঁজে পেতে পারেন:

https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611


একটি বিট বন্ধ TOPIC, কিন্তু একটি ক্লিনার এইচটিএমএল জন্য সাহায্য করতে পারে ... সিএসএস

.common_table{
    display:table;
    border-collapse:collapse;
    border:1px solid grey;
    }
.common_table DIV{
    display:table-row;
    border:1px solid grey;
    }
.common_table DIV DIV{
    display:table-cell;
    }

এইচটিএমএল

<DIV class="common_table">
   <DIV><DIV>this is a cell</DIV></DIV>
   <DIV><DIV>this is a cell</DIV></DIV>
</DIV>

ক্রোম এবং ফায়ারফক্স উপর কাজ করে


যদি <table> কিছু থাকে তবে আপনি পছন্দ করেন না, সম্ভবত আপনি রিসেট ফাইলটি ব্যবহার করতে পারেন?

অথবা

যদি আপনার পৃষ্ঠাটির বিন্যাসের জন্য এটি প্রয়োজন হয় তবে সারণির ছাড়াই ওয়েবসাইট ডিজাইন করার জন্য cssplay লেআউট উদাহরণগুলি দেখুন


লেআউট ট্যাগগুলির একটি কাস্টম সেট তৈরিতে, আমি এই সমস্যার অন্য উত্তর খুঁজে পেয়েছি। এখানে ট্যাগ এবং তাদের CSS ক্লাসের কাস্টম সেট।

এইচটিএমএল

<layout-table>
   <layout-header> 
       <layout-column> 1 a</layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 </layout-column>
       <layout-column> 4 </layout-column>
   </layout-header>

   <layout-row> 
       <layout-column> a </layout-column>
       <layout-column> a 1</layout-column>
       <layout-column> a </layout-column>
       <layout-column> a </layout-column>
   </layout-row>

   <layout-footer> 
       <layout-column> 1 </layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 b</layout-column>
       <layout-column> 4 </layout-column>
   </layout-footer>
</layout-table>

সিএসএস

layout-table
{
    display : table;
    clear : both;
    table-layout : fixed;
    width : 100%;
}

layout-table:unresolved
{
    color : red;
    border: 1px blue solid;
    empty-cells : show;
}

layout-header, layout-footer, layout-row 
{
    display : table-row;
    clear : both;   
    empty-cells : show;
    width : 100%;
}

layout-column 
{ 
    display : table-column;
    float : left;
    width : 25%;
    min-width : 25%;
    empty-cells : show;
    box-sizing: border-box;
    /* border: 1px solid white; */
    padding : 1px 1px 1px 1px;
}

layout-row:nth-child(even)
{ 
    background-color : lightblue;
}

layout-row:hover 
{ background-color: #f5f5f5 }

ফাঁকা কোষ এবং কোষগুলি সঠিক আকার হতে চাওয়ার বোতামটি আকার এবং প্যাডিং। বর্ডার একই জিনিসটি করবে, কিন্তু সারিতে একটি লাইন তৈরি করবে। প্যাডিং না। এবং, যদিও আমি এটি চেষ্টা করে নিই, আমি মনে করি মার্জিন প্যাডিং, ফোর্সিং এবং খালি সেলটিকে সঠিকভাবে রেন্ডার করা হিসাবে একইভাবে কাজ করবে।


div গুলি ট্যাবুলার তথ্য জন্য ব্যবহার করা উচিত নয়। যে লেআউট জন্য টেবিল ব্যবহার হিসাবে ঠিক হিসাবে ভুল।
একটি <table> ব্যবহার করুন। এটা সহজ, semantically সঠিক, এবং আপনি 5 মিনিটে সম্পন্ন করা হবে।


.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

রানযোগ্য snippet:

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}
<body>
  <form id="form1">
      <div class="div-table">
             <div class="div-table-row">
                <div class="div-table-col" align="center">Customer ID</div>
                <div  class="div-table-col">Customer Name</div>
                <div  class="div-table-col">Customer Address</div>
             </div>
            <div class="div-table-row">
                  <div class="div-table-col">001</div>
                <div class="div-table-col">002</div>
                <div class="div-table-col">003</div>
            </div>
            <div class="div-table-row">
                <div class="div-table-col">xxx</div>
                <div class="div-table-col">yyy</div>
                <div class="div-table-col">www</div>
           </div>
            <div class="div-table-row">
                <div class="div-table-col">ttt</div>
                <div class="div-table-col">uuu</div>
                <div class="div-table-col">Mkkk</div>
           </div>

      </div>
  </form>
</body>





css