मैंने डिव और ग्रिड सीएसएस का उपयोग करके एक "टेबल" बनाया है और मैं देख रहा हूं कि ग्रिड सीएसएस का उपयोग करके सीमा को कैसे ध्वस्त किया जाए।

मुद्दा: यदि उपरोक्त डिव की निचली सीमा है और निचले डिव की शीर्ष सीमा है तो दोहरी सीमा होती है।

क्या हम इससे बच सकते हैं?

.bodyTable {
    grid-template-columns: 220px 220px 220px 220px;
    grid-template-rows: 110px 110px 110px;
}

.displayGrid {
    display: grid;
}

.borderBottom{
  border: solid;
  border-width: 0px 0px 1px 0px;
}

.borderTop{
   border: solid;
   border-width: 1px 0px 0px 0px;
}
<div id="table" class="displayGrid bodyTable">
   <div class="borderBottom">
      A
   </div>
   <div class="borderBottom">
      B
   </div>
   <div class="borderBottom">
      C
   </div>
   <div class="borderBottom">
      D
   </div>
   <div class="borderTop">
      G
   </div>
   <div  class="borderTop">
      H 
   </div>
   <div>
      I
   </div>
   <div>
      J
   </div>
   <div>
      M
   </div>
   <div>
      N
   </div>
   <div>
      O
   </div>
   <div>
      P
   </div>
</div>
0
Neo 23 अक्टूबर 2018, 17:51

1 उत्तर

सबसे बढ़िया उत्तर

एक आसान उपाय यह होगा कि borderTop को एक नकारात्मक मार्जिन दिया जाए। हालांकि यह इस बात पर निर्भर करता है कि कक्षा कहां लागू होती है।

.bodyTable {
    grid-template-columns: 220px 220px 220px 220px;
    grid-template-rows: 110px 110px 110px;
}

.displayGrid {
    display: grid;
}

.borderBottom{
  border: solid;
  border-width: 0px 0px 1px 0px;
}

.borderTop{
   border: solid;
   border-width: 1px 0px 0px 0px;
   margin-top: -1px;
}
<div id="table" class="displayGrid bodyTable">
   <div class="borderBottom">
      A
   </div>
   <div class="borderBottom">
      B
   </div>
   <div class="borderBottom">
      C
   </div>
   <div class="borderBottom">
      D
   </div>
   <div class="borderTop">
      G
   </div>
   <div  class="borderTop">
      H 
   </div>
   <div>
      I
   </div>
   <div>
      J
   </div>
   <div>
      M
   </div>
   <div>
      N
   </div>
   <div>
      O
   </div>
   <div>
      P
   </div>
</div>
1
SuperDJ 23 अक्टूबर 2018, 14:55