css - what - सीएसएस में एचटीएमएल colspan




what is css in english (8)

मैं निम्नलिखित के समान लेआउट बनाने की कोशिश कर रहा हूं:

+---+---+---+
|   |   |   |
+---+---+---+
|           |
+-----------+

जहां नीचे ऊपरी पंक्ति की जगह भर रहा है।

यदि यह एक वास्तविक तालिका थी, तो मैं इसे आसानी से <td colspan="3"> से पूरा कर सकता था, लेकिन जैसा कि मैं बस एक टेबल-जैसे लेआउट बना रहा हूं, मैं <table> टैग का उपयोग नहीं कर सकता। क्या यह सीएसएस का उपयोग कर संभव है?


आप एक ग्रिड सिस्टम जैसे http://960.gs/ का उपयोग करने का प्रयास कर सकते हैं

आपका कोड ऐसा कुछ होगा, मानते हुए कि आप "12 कॉलम" लेआउट का उपयोग कर रहे हैं:

<div class="container_12">
<div class="grid_4">1</div><div class="grid_4">2</div><div class="grid_4">3</div>
<div class="clear"></div>
<div class="grid_12">123</div>
</div>

आप हमेशा position:absolute; सकते हैं position:absolute; चीजें और चौड़ाई निर्दिष्ट करें। यह करने का यह बहुत तरल तरीका नहीं है, लेकिन यह काम करेगा।


जहां तक ​​मुझे पता है, सीएसएस में कोई कॉलस्पैन नहीं है, लेकिन निकट भविष्य में बहु कॉलम लेआउट के लिए column-span होगा, लेकिन चूंकि यह केवल CSS3 में एक ड्राफ्ट है, इसलिए आप इसे here देख सकते here । वैसे भी आप इस तरह टेबल-जैसे डिस्प्ले के साथ div और span का उपयोग करके वर्कअराउंड कर सकते हैं।

यह एचटीएमएल होगा:

<div class="table">
  <div class="row">
    <span class="cell red first"></span>
    <span class="cell blue fill"></span>
    <span class="cell green last"></span>
  </div>
</div>
<div class="table">
  <div class="row">
    <span class="cell black"></span>
  </div>
</div>

और यह सीएसएस होगा:

  /* this is to reproduce table-like structure
     for the sake of table-less layout. */
  .table { display:table; table-layout:fixed; width:100px; }
  .row { display:table-row; height:10px; }
  .cell { display:table-cell; }

  /* this is where the colspan tricks works. */
  span { width:100%; }

  /* below is for visual recognition test purposes only. */
  .red { background:red; }
  .blue { background:blue; }
  .green { background:green; }
  .black { background:black; }

  /* this is the benefit of using table display, it is able 
     to set the width of it's child object to fill the rest of 
     the parent width as in table */
  .first { width: 20px; }
  .last { width: 30px; }
  .fill { width: 100%; }

इस चाल का उपयोग करने का एकमात्र कारण table-layout व्यवहार का लाभ प्राप्त करना है, मैं इसे बहुत से उपयोग करता हूं अगर केवल कुछ प्रतिशत में div और span width को सेट करना हमारी डिज़ाइन आवश्यकता को पूरा नहीं करता है।

लेकिन अगर आपको table-layout व्यवहार से लाभ उठाने की आवश्यकता नहीं है, तो दुरिलई का जवाब आपको पर्याप्त अनुकूल करेगा।


डुप्लिकेट मार्कअप के साथ कुछ योग्य करने के लिए मीडिया क्वेरी क्लासेस का उपयोग किया जा सकता है। बूटस्ट्रैप के साथ मेरा दृष्टिकोण यहां है:

  <tr class="total">
    <td colspan="1" class="visible-xs"></td>
    <td colspan="5" class="hidden-xs"></td>
    <td class="focus">Total</td>
    <td class="focus" colspan="2"><%= number_to_currency @cart.total %></td>
  </tr>

मोबाइल के लिए colspan 1, सीएसएस के साथ दूसरों के लिए colspan 5 काम कर रहा है।


यदि आप div और span का उपयोग करते हैं तो डेटाग्रिड-टेबल पंक्ति वॉल्यूम में अधिक होने पर यह अधिक कोड आकार पर कब्जा कर लेगा। यह नीचे कोड सभी ब्राउज़रों में चेक किया गया है

HTML:

<div id="gridheading">
<h4>Sl.No</h4><h4 class="big">Name</h4><h4>Location</h4><h4>column</h4><h4>column</h4><h4>column</h4><h4>Amount(Rs)</h4><h4>View</h4><h4>Edit</h4><h4>Delete</h4> 
</div>
<div class="data"> 
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
<div class="data"> 
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>

सीएसएस:

#gridheading {
    background: #ccc;
    border-bottom: 1px dotted #BBBBBB;
    font-size: 12px;
    line-height: 30px;
    text-transform: capitalize;
}
.data {
    border-bottom: 1px dotted #BBBBBB;
    display: block;
    font-weight: normal;
    line-height: 20px;
    text-align: left;
    word-wrap: break-word;
}
 h4 {
    border-right: thin dotted #000000;
    display: table-cell;
    margin-right: 100px;
    text-align: center;
    width: 100px;
    word-wrap: break-word;
}
.data .big {
    margin-right: 150px;
    width: 200px;
}

यह सीएसएस के दायरे का हिस्सा नहीं है। colspan पृष्ठ की सामग्री की संरचना का वर्णन करता है, या तालिका में डेटा को कुछ अर्थ देता है, जो HTML का काम है।


display: table-cell; width: 1%; जोड़ने का प्रयास करें display: table-cell; width: 1%; display: table-cell; width: 1%; आपके टेबल सेल तत्व के लिए।

.table-cell {
  display: table-cell;
  width: 1%;
  padding: 4px;
  border: 1px solid #efefef;
}
<div class="table">
  <div class="table-cell">one</div>
  <div class="table-cell">two</div>
  <div class="table-cell">three</div>
  <div class="table-cell">four</div>
</div>
<div class="table">
  <div class="table-cell">one</div>
  <div class="table-cell">two</div>
  <div class="table-cell">three</div>
  <div class="table-cell">four</div>
</div>
<div class="table">
  <div class="table-cell">one</div>
</div>


<div style="width: 100%;">
    <div style="float: left; width: 33%;">Row 1 - Cell 1</div>
    <div style="float: left; width: 34%;">Row 1 - Cell 2</div>
    <div style="float: left; width: 33%;">Row 1 - Cell 3</div>
</div>
<div style="clear: left; width: 100%;">
Row 2 - Cell 1
</div>






css