CSS में HTML colspan


251

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

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

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

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


8
सबसे अच्छा समाधान वास्तव में इस बात पर निर्भर करता है कि तालिका में क्या हो रहा है। यदि यह डेटा (तालिका में मौजूद कुछ) है तो एक तालिका का उपयोग करें। यदि आप पृष्ठ के लेआउट को नियंत्रित करने के लिए एक तालिका का उपयोग कर रहे हैं, तो नीचे दिए गए HTML + CSS समाधानों में से एक बेहतर है।
mwcz

दोनों मामलों के लिए मार्कअप जोड़ें, फिर मीडिया क्वेरी सीएसएस क्लास का उपयोग करके एक बार में केवल एक ही दिखाएं।
DigitalDesignDj

2
सीएसएस के बारे में भूल जाओ। यदि आप सारणीबद्ध डेटा प्रदर्शित करते हैं, तो आपको निश्चित रूप से पता होगा कि यह कितने स्तंभों पर फैला होगा। colspanविशेषता का उपयोग करें
टिहोमिर मितकोव

मैं इसे बूटस्ट्रैप या बूटस्ट्रैप से अनुकूलित ग्रिड
अरुण प्रसाद ES

यदि आप CSS3 का उपयोग कर रहे हैं, तो आप कॉलमस्पैन का उपयोग कर सकते हैं। <Td colspan = "#"> के विपरीत, आपके पास कॉलमों की संख्या निर्धारित करने का विकल्प नहीं है, लेकिन आप सभी कॉलमों को जोड़ सकते हैं। w3schools.com/cssref/css3_pr_column-span.asp
मिस्टीडाउन

जवाबों:


407

इसके लिए कोई सरल, सुरुचिपूर्ण सीएसएस एनालॉग नहीं है colspan

इस मुद्दे पर खोजें विभिन्न प्रकार के समाधानों को लौटाएंगी जिनमें विकल्प की एक बीवी शामिल है, जिसमें पूर्ण स्थिति, आकार देने के साथ-साथ ब्राउज़र की समान विविधता और परिस्थिति-विशेष केविशेष भी शामिल हैं। आप जो पाते हैं, उसके आधार पर सबसे अच्छा सूचित निर्णय पढ़ें और बनायें।


10
टेबल्स संरचनात्मक तत्व हैं और सिर्फ इसलिए कि कोल्प्सन परिवर्तन का उपयोग करने का मतलब यह नहीं है कि यह नहीं है। CSS का उपयोग तत्वों को स्टाइल करने और संरचना को बदलने के लिए नहीं किया जाता है। W3C यहाँ तालिका संरचना पर चर्चा करता है: w3.org/TR/html401/struct/tables.html#h-11.2
Rob

88
आरओबी, अपनी स्थिति को समझें, लेकिन डब्ल्यू 3 सी सिफारिशों में देखें - विशेष रूप से पूरे टेबल प्रतिमान से संबंधित - और आप पाएंगे कि उनके विचार का हिस्सा सबसे निश्चित रूप से, तालिकाओं की प्रस्तुति था। यह विचार कि तालिकाओं की कल्पना विशुद्ध रूप से की गई थी क्योंकि संरचना एक समकालीन कल्पना है, मुझे लगता है कि हम सभी को फैलने से रोकने के लिए बेहतर सेवा करेंगे। मुद्दा यह है कि हमें तालिकाओं के बारे में हठधर्मिता को रोकने की आवश्यकता है। मेरे लिए यह कहना गलत होगा कि वे हमेशा प्रस्तुति देते हैं, और यह कहना आपके लिए हमेशा गलत है कि वे हमेशा संरचना रहे हैं । वास्तविकता बस यह नहीं है कि कट-एंड-ड्राय।
डेविड

4
अपने जवाब की तरह लग रहा है लोकप्रिय जवाब। :) मुझे यह जानकर खुशी हुई कि एंटी-टेबल हठधर्मिता (जिसे मैंने खरीदा है) बहुत सख्त है। मैं अपने जवाब के साथ केवल अनिच्छुक के लिए खड़ा हूं क्योंकि मुझे अभी भी लगता colspanहै कि यह नौकरी के लिए सही उपकरण है। मेरा उत्तर 75% सही था, और तुम्हारा 100% सही है। आपको SO पर वापस आना चाहिए।
mwcz

71
2 साल बाद, मैंने इस पर ध्यान दिया और लेखक को वोट देना चाहता था, लेकिन उसने कहा "अपने पद के लिए मतदान नहीं कर सकता" और मुझे एहसास हुआ कि यह मैं था, योग्य। मैंने स्वीकार किए गए समाधान को इसे बदलने का फैसला किया क्योंकि मुझे लगता है कि इसकी बेहतर जानकारी है।
टॉवर

14
यह कुछ अन्य (अनिर्दिष्ट) उत्तर के बारे में एक लघु-निबंध है, जो पूछे गए प्रश्न का उत्तर नहीं है।
जुक्का के। कोर्पेला

56

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

यह HTML होगा:

<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 और अवधि चौड़ाई सेट करना हमारी डिजाइन आवश्यकता को पूरा नहीं करता है।

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


4
हाँ, लेकिन थोड़ा ठीक: इसके बजाय .span { ...होना चाहिए span { ...
स्लाव मेल्टसर

2
divसारणीबद्ध डेटा प्रदर्शित करने के लिए टैग का उपयोग करना उतना ही बुरा है जितना कि tableपेज लेआउट को नियंत्रित करने के लिए उपयोग करना
टिहोमिर मितकोव

1
@TichomirMitkov यह दर्शाता है कि आप लेआउट को बदलने के लिए उत्तरदायी डिज़ाइन का उपयोग कर रहे हैं या नहीं - जिस स्थिति में कभी-कभी यह काफी अच्छी तरह से काम कर सकता है।
साइमन_वेवर

4
यह वास्तव में इस सवाल का जवाब नहीं देता है क्योंकि आपके पास अनिवार्य रूप से आपके द्वारा दिए गए उदाहरण में एक दूसरे के बाद दो तालिकाओं हैं। (Ietwo ने क्लास "टेबल" के साथ भाग दिया)
विंटर

21

एक और सुझाव पूरी तरह से तालिकाओं के बजाय फ्लेक्सबॉक्स का उपयोग कर रहा है। यह निश्चित रूप से एक "आधुनिक ब्राउज़र" है, लेकिन आओ, यह 2016 है;)

कम से कम यह एक वैकल्पिक समाधान हो सकता है जो आजकल इसका उत्तर ढूंढ रहे हैं, क्योंकि मूल पोस्ट 2010 से था।

यहाँ एक महान गाइड है: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.table {
  border: 1px solid red;
  padding: 2px;
  max-width: 300px;
  display: flex;
  flex-flow: row wrap;
}
.table-cell {
  border: 1px solid blue;
  flex: 1 30%;
}
.colspan-3 {
  border: 1px solid green;
  flex: 1 100%;
}
<div class="table">
  <div class="table-cell">
    row 1 - cell 1
  </div>
  <div class="table-cell">
    row 1 - cell 2
  </div>
  <div class="table-cell">
    row 1 - cell 3
  </div>
  <div class="table-cell colspan-3">
    row 2 - cell 1 (spans 3 columns)
  </div>
</div>


8
<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>

मैं कोशिकाओं की चौड़ाई नहीं जान सकता।
टॉवर

1
फिर एक चौड़ाई मत डालो। यह मायने नहीं रखना चाहिए। लेकिन अगर आप चाहते हैं कि वे समान चौड़ाई में फैले तो दो मुख्य विभाजनों के लिए समान चौड़ाई होनी चाहिए।
डस्टिन लाईन

1
आप चौड़ाई का उपयोग कर सकते हैं: कैल्क (100% / 3) जो मध्य 1% अधिक देने की तुलना में थोड़ा बेहतर करेगा
ii iml0sto1

5

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


ओपी संरचनात्मक अर्थ के बिना, स्पष्ट रूप से "एक टेबल की तरह लेआउट बनाने" का उल्लेख करता है। क्या यह सीएसएस तालिकाओं का बहुत उद्देश्य नहीं है? पूरे टेबल की तुलना में कोलस्पैन प्रॉपर्टी को अलग तरह से ट्रीट करने का कोई वस्तुनिष्ठ कारण नहीं है, अगर कोई डिज़ाइन-मात्र CSS टेबल एलिमेंट है, तो डिज़ाइन-केवल CSS colspan प्रॉपर्टी क्यों नहीं ...
Skippy le Grand Gourou

2
इस प्रश्न के शीर्ष मत वाले उत्तर को देखें। आपकी भावना पर पहले ही चर्चा हो चुकी है और मैं इससे सहमत होना चाहता हूं। मुद्दे पर मेरी राय निश्चित रूप से पांच साल में स्थानांतरित हो गई है क्योंकि मैंने यह जवाब लिखा है।
mwcz

4

अप-टू-डेट उत्तर प्रदान करने के लिए: आज का सबसे अच्छा तरीका इस तरह से सीएसएस ग्रिड लेआउट का उपयोग करना है:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "top-left top-middle top-right"
    "bottom bottom bottom"
}

.item-a {
  grid-area: top-left;
}
.item-b {
  grid-area: top-middle;
}
.item-c {
  grid-area: top-right;
}
.item-d {
  grid-area: bottom;
}

और HTML

<div class="item-a">1</div>
<div class="item-b">2</div>
<div class="item-c">3</div>
<div class="item-d">123</div>

3

आप 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>

3

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


यह कैसे मदद करने वाला है? एक तालिका की मूलभूत अवधारणा यह है कि प्रत्येक पंक्ति में समान कोशिकाएँ होती हैं। यदि पंक्तियों में से एक में एक सेल है जो सफलतापूर्वक "चौड़ाई: 1%" को लागू करता है, तो सभी पंक्तियों में "चौड़ाई: 1%" के रूप में वह कॉलम होगा। "कोलस्पैन" का बिंदु निश्चित चौड़ाई के कॉलम के 2 (या अधिक) लेना है और उन्हें संयुक्त चौड़ाई प्राप्त करना है।
IAM_AL_X

3

मुझे कुछ सफलता मिली है, हालांकि यह काम करने के लिए कुछ गुणों पर निर्भर करता है:

table-layout: fixed border-collapse: separate

और सेल 'चौड़ाई' जो आसानी से विभाजित / फैलती है, अर्थात 25% चौड़ाई की 4 x कोशिकाएँ:

.div-table-cell,
* {
  box-sizing: border-box;
}

.div-table {
  display: table;
  border: solid 1px #ccc;
  border-left: none;
  border-bottom: none;
  table-layout: fixed;
  margin: 10px auto;
  width: 50%;
  border-collapse: separate;
  background: #eee;
}

.div-table-row {
  display: table-row;
}

.div-table-cell {
  display: table-cell;
  padding: 15px;
  border-left: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  text-align: center;
  background: #ddd;
}

.colspan-3 {
  width: 300%;
  display: table;
  background: #eee;
}

.row-1 .div-table-cell:before {
  content: "row 1: ";
}

.row-2 .div-table-cell:before {
  content: "row 2: ";
}

.row-3 .div-table-cell:before {
  content: "row 3: ";
  font-weight: bold;
}

.div-table-row-at-the-top {
  display: table-header-group;
}
<div class="div-table">

  <div class="div-table-row row-1">

    <div class="div-table-cell">Cell 1</div>
    <div class="div-table-cell">Cell 2</div>
    <div class="div-table-cell">Cell 3</div>

  </div>

  <div class="div-table-row row-2">

    <div class="div-table-cell colspan-3">
      Cor blimey he's only gone and done it.
    </div>

  </div>

  <div class="div-table-row row-3">

    <div class="div-table-cell">Cell 1</div>
    <div class="div-table-cell">Cell 2</div>
    <div class="div-table-cell">Cell 3</div>

  </div>

</div>

https://jsfiddle.net/sfjw26rb/2/

इसके अलावा, प्रदर्शन को लागू करना: टेबल-हेडर-समूह या टेबल-फुटर-समूह 'पंक्ति' तत्वों को 'तालिका' के ऊपर / नीचे कूदने का एक आसान तरीका है।


0

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

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;
}

0
column-span: all; /* W3C */
-webkit-column-span: all; /* Safari & Chrome */
-moz-column-span: all; /* Firefox */
-ms-column-span: all; /* Internet Explorer */
-o-column-span: all; /* Opera */

http://www.quackit.com/css/css3/properties/css_column-span.cfm


पर्याप्त समर्थन नहीं ... IE8 दुख की बात है अभी भी विकास के लिए एक समस्या है
beauXjames

9
ओपी एक से table-cellअधिक टेबल कॉलम रखना चाहता है । column-spanएक कॉलम-लेआउट को नियंत्रित करने के लिए है। जिस तरह से आप कई कॉलमों पर टेक्स्ट प्रवाहित करते हैं, जिस तरह से अखबार करते हैं।
क्रिस वेसलिंग

1
वास्तव में - जबकि यह प्रदर्शन पर उपयोग करने के लिए वास्तव में अच्छा होगा: टेबल-सेल; तत्व, यह केवल css-
मार्क

@ Mark-- कॉलम-स्पैन का उपयोग पेरेंट पर परिभाषित कॉलम-काउंट प्रॉपर्टी के साथ किया जाता है। डिस्प्ले टाइप बदलना जरूरी नहीं है। इसके अलावा, कॉलम-स्पैन केवल 1 या सभी को मान के रूप में स्वीकार कर सकता है, यह अंशांकन की अनुमति नहीं देता है, इसलिए "कॉलम-स्पैन: 2", जैसा कि आपके फिडल में देखा गया है, यह संपत्ति का वैध उपयोग नहीं है।
मिस्टीवन

0

यदि आप यहां आते हैं क्योंकि आपको colspanविशेषता को चालू या बंद करना होगा (मोबाइल लेआउट के लिए कहें):

एस को डुप्लिकेट करें <td>और केवल वांछित लोगों को दिखाएं colspan:

table.colspan--on td.single {
  display: none;
}

table.colspan--off td.both {
  display: none;
}
<!-- simple table -->
<table class="colspan--on">
  <thead>
    <th>col 1</th>
    <th>col 2</th>
  </thead>
  <tbody>
    <tr>
      <!-- normal row -->
      <td>a</td>
      <td>b</td>
    </tr>
    <tr>
      <!-- the <td> spanning both columns -->
      <td class="both" colspan="2">both</td>

      <!-- the two single-column <td>s -->
      <td class="single">A</td>
      <td class="single">B</td>
    </tr>
    <tr>
      <!-- normal row -->
      <td>a</td>
      <td>b</td>
    </tr>
  </tbody>
</table>
<!--
that's all
-->

 

<!--
stuff only needed for making this interactive example looking good:
-->
<br><br>
<button onclick="toggle()">Toggle colspan</button>
<script>/*toggle classes*/var tableClasses = document.querySelector('table').classList;
function toggle() {
  tableClasses.toggle('colspan--on');
  tableClasses.toggle('colspan--off');
}
</script>
<style>/* some not-needed styles to make this example more appealing */
td {text-align: center;}
table, td, th {border-collapse: collapse; border: 1px solid black;}</style>


0

CSS गुण "कॉलम-काउंट", "कॉलम-गैप" और "कॉलम-स्पैन" इस तरह से कर सकते हैं जो एक ही आवरण के अंदर छद्म-तालिका के सभी स्तंभों को रखता है (HTML अच्छा और साफ रहता है)।

केवल चेतावनी यह है कि आप केवल 1 कॉलम या सभी कॉलम को परिभाषित कर सकते हैं, और कॉलम-स्पैन फ़ायरफ़ॉक्स में अभी तक काम नहीं करता है, इसलिए यह सुनिश्चित करने के लिए कुछ अतिरिक्त CSS आवश्यक है कि यह सही ढंग से प्रदर्शित हो। https://www.w3schools.com/css/css3_multiple_columns.asp

.split-me {
  -webkit-column-count: 3;
  -webkit-column-gap: 0;
  -moz-column-count: 3;
  -moz-column-gap: 0;
  column-count: 3;
  column-gap: 0;
}

.cols {
  /* column-span is 1 by default */
  column-span: 1;
}

div.three-span {
  column-span: all !important;
}

/* alternate style for column-span in Firefox */
@-moz-document url-prefix(){
  .three-span {
    position: absolute;
    left: 8px;
    right: 8px;
    top: auto;
    width: auto;
  }
}


    
<p>The column width stays fully dynamic, just like flex-box, evenly scaling on resize.</p>

<div class='split-me'>
  <div class='col-1 cols'>Text inside Column 1 div.</div>
  <div class='col-2 cols'>Text inside Column 2 div.</div>
  <div class='col-3 cols'>Text inside Column 3 div.</div>
  <div class='three-span'>Text div spanning 3 columns.</div>
</div>



  <style>
/* Non-Essential Visual Styles */

html * { font-size: 12pt; font-family: Arial; text-align: center; }
.split-me>* { padding: 5px; } 
.cols { border: 2px dashed black; border-left: none; }
.col-1 { background-color: #ddffff; border-left: 2px dashed black; }
.col-2 { background-color: #ffddff; }
.col-3 { background-color: #ffffdd; }
.three-span {
  border: 2px dashed black; border-top: none;
  text-align: center; background-color: #ddffdd;
}
  </style>


0

मैं यहां इसलिए आया क्योंकि वर्तमान में वर्डप्रेस टेबल ब्लॉक कोलस्पैन पैरामीटर का समर्थन नहीं करता है और मुझे लगा कि मैं इसे सीएसएस का उपयोग करके बदल दूंगा। यह मेरा समाधान था, यह मानते हुए कि कॉलम एक ही चौड़ाई हैं:

table {
  width: 100%;
}

table td {
  width: 50%;
  background: #dbdbdb;
  text-align: center;
}

table tr:nth-child(2n+1) {
  position:relative;
  display:block;
  height:20px;
  background:green;
}

table tr:nth-child(2n+1) td {
  position:absolute;
  left:0;
  right:-100%;
  width: auto;
  top:0;
  bottom:0;
  background:red;
  text-align:center;
}
<table>
    <tr>
        <td>row</td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell</td>
    </tr>
    <tr>
        <td>row</td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell</td>
    </tr>
</table>


-1

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


खराब मार्कअप का उपयोग करने की तुलना में इसे प्राप्त करने के कई और तरीके हैं। एक लेआउट को मजबूर करने के लिए पूर्ण स्थिति को हमेशा खराब अभ्यास माना जाता है।
मिस्टीडाउन

-1

मैंने यह फिडेल बनाया है:

यहां छवि विवरण दर्ज करें

http://jsfiddle.net/wo40ev18/3/

एचटीएमएल

<div id="table">
<div class="caption">
    Center Caption
</div>
<div class="group">
      <div class="row">
            <div class="cell">Link 1t</div>
            <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell ">Link 2</div>
      </div>
</div>

सीएसएस

   #table {
    display:table;
}

.group {display: table-row-group; }

.row {
    display:table-row;
    height: 80px;
    line-height: 80px;
}

.cell {
    display:table-cell;
    width:1%;
    text-align: center;
    border:1px solid grey;
    height: 80px
        line-height: 80px;
}

.caption {
    border:1px solid red; caption-side: top; display: table-caption; text-align: center; 
    position: relative;
    top: 80px;
    height: 80px;
      height: 80px;
    line-height: 80px;

}

1
लेकिन मुझे लगता है कि बूटस्ट्रैप ग्रिड इसे बहुत आसानी से बना सकता है
अरुण प्रसाद ES

यह वह समाधान प्रदान नहीं करता है जो पूछने वाले की तलाश में था। यह सिर्फ कोशिकाओं की एक इनलाइन पंक्ति बनाता है।
मिस्टीडॉन

-1

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

  <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 दूसरों के लिए जिसमें CSS काम कर रहा है।


पूछने वाले ने विशेष रूप से कहा कि वह HTML <तालिका> तत्वों का उपयोग नहीं कर सका। यदि वह कर सकता है, तो यह हल करने के लिए एक आसान समस्या होगी।
मिस्टीडाउन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.