Colspan सभी कॉलम


385

मैं यह कैसे निर्दिष्ट कर सकता हूं कि एक tdटैग को सभी कॉलमों को फैलाना चाहिए (जब तालिका में कॉलमों की सही मात्रा को समझना मुश्किल होगा कि HTML कब प्रस्तुत किया जा रहा है)? w3schools में उल्लेख किया गया है कि आप इसका उपयोग कर सकते हैं colspan="0", लेकिन यह बिल्कुल नहीं कहता कि ब्राउज़र उस मूल्य का समर्थन करते हैं (IE 6 समर्थन करने के लिए हमारी सूची में है)।

ऐसा प्रतीत होता है कि colspanआपके द्वारा काम किए जा सकने वाले स्तंभों की सैद्धांतिक मात्रा से अधिक मूल्य पर table-layoutसेट करना , लेकिन यदि आपने सेट किया है तो यह काम नहीं करेगा fixed। क्या बड़ी संख्या के साथ एक स्वचालित लेआउट का उपयोग करने के लिए कोई नुकसान हैं colspan? क्या ऐसा करने का अधिक सही तरीका है?


स्वीकृत उत्तर इस बारे में नहीं है कि यह कैसे करना है, और ऐसा लगता है कि इसमें गंभीर प्रदर्शन / स्थिरता है। तो मुझे लगता है कि उत्तर है: कॉलम की संख्या को हार्डकोड करें। मुझे कोई व्यवहार्य विकल्प नहीं दिखता।
एंड्रयू कोस्टर

जवाबों:


268

मेरे पास IE 7.0, फ़ायरफ़ॉक्स 3.0 और क्रोम 1.0 है

एक TD में colspan = "0" विशेषता उपरोक्त सभी ब्राउज़रों में से सभी TDs में फैली नहीं है

शायद उचित मार्कअप अभ्यास के रूप में अनुशंसित नहीं है, लेकिन यदि आप कुल संभव से अधिक उच्च कोल्प्सन मूल्य देते हैं अन्य पंक्तियों में कॉलम , फिर टीडी सभी कॉलमों को फैलाएगा।

यह तब काम नहीं करता है जब टेबल-लेआउट सीएसएस संपत्ति तय करने के लिए सेट है।

एक बार फिर, यह सही समाधान नहीं है, लेकिन तालिका-लेआउट सीएसएस संपत्ति स्वचालित होने पर उपर्युक्त 3 ब्राउज़र संस्करणों में काम करने लगता है । उम्मीद है की यह मदद करेगा।


यदि आप html फ़ायरफ़ॉक्स 3 की शुरुआत में एक सख्त सिद्धांत निर्दिष्ट करते हैं तो HTML 4.01 स्पेक्स द्वारा आवश्यक रूप से कोलस्पैन प्रस्तुत करें।
एनीकी

253
मैं colspan="42"पूरी रेंज में फैले हूं । स्पष्ट रूप से यह> 42 कॉलम के लिए एक समस्या है, लेकिन यह उन कुछ जादुई संख्याओं में से एक है, जिन्हें मैं स्वीकार करता हूं।
मार्टिन कार्नी

40
मैं अत्यधिक सलाह देता हूं कि आप कोल्पसन = <सही सही संख्या> डालें। मैं बस फ़ायरफ़ॉक्स में एक विशाल इत्र बग मारा जो मुझे पता लगाने के लिए पूरे दिन लगा। मनमाने ढंग से बड़े कोलस्पैन सीमा-पतन: पतन के साथ एक बड़ी मेज पर एफएफ चोक करेंगे। 800 पंक्तियों और 8 स्तंभों वाली मेरी तालिका को प्रस्तुत करने में 5 सेकंड लग रहे थे। सही colspan के साथ यह एक उचित 1 सेकंड के लिए वापस नीचे है। Bugzilla.mozilla.org/show_bug.cgi?id=675417
InfinitiesLoop

2
मैं इस विधि का उपयोग नहीं करने की सलाह देता हूं। बस OSX पर क्रोम से बहुत अजीब परिणाम मिला (कॉलम एक दूसरे को ओवरलैप करते हुए)।
त्ज़ाक

क्रोम में पाई जाने वाली एक अन्य समस्या यदि आप टीआर तत्व को एक सीमा देने की कोशिश करते हैं जिसमें "ओवरसाइज" टीडी शामिल है, तो सही सीमा दिखाई नहीं देगी।
मैसिमो

272

बस इस का उपयोग करें:

colspan="100%"

यह फ़ायरफ़ॉक्स 3.6, IE 7 और ओपेरा 11 पर काम करता है! (और मैं दूसरों पर अनुमान लगाता हूं, मैं कोशिश नहीं कर सका)


चेतावनी: जैसा कि नीचे टिप्पणी में बताया गया है, वास्तव में वैसा ही है colspan="100"। इसलिए, यह समाधान सीएसएस table-layout: fixedया 100 से अधिक कॉलम वाली तालिकाओं के लिए टूट जाएगा ।


16
IE6 में परीक्षण किया गया [इसके अतिरिक्त] - IE8, क्रोम [पीसी और मैक पर], फ़ायरफ़ॉक्स 4.0 [पीसी और मैक], सफारी 5 [पीसी और मैक]
hndcrftd

11
यह अभी भी इतना अस्पष्ट कैसे है? यह हर गली-नुक्कड़ पर चिल्लाया जाना चाहिए !!! मैं अब काफी कुछ समय के लिए अलग अलग समय पर इस शापित कॉल्सपन मुद्दे के साथ संघर्ष कर रहा है
hndcrftd

30
क्रोम और फ़ायरफ़ॉक्स पर, colspan = "3%" को colspan = "3" के समान ही संभाला जाता है।
zpmorgan

98
@zpmorgan और @Sprog, आप सही हैं! colspan="100%"बिल्कुल मतलब है colspan="100"
नेमोसेटिन

37
लोल, मैं अंत में इस समस्या का एक निरंतर क्रॉस-ब्राउज़र समाधान देखकर बहुत खुश था, केवल टिप्पणियों के माध्यम से यह जानने के लिए कि यह वास्तव में एक भ्रामक नहीं है, जैसा कि काम करने की उम्मीद है :( मुझे लगता है कि यह अधिक upvotes के लायक नहीं है स्वीकार किए गए उत्तर की तुलना में = /
फ्रांसिस्को 15

64

यदि आप एक 'शीर्षक' सेल बनाना चाहते हैं, जो आपकी तालिका के शीर्ष लेख के रूप में सभी कॉलमों को फैलाए, तो आप कैप्शन टैग ( http://www.w3schools.com/tags/tag_caption.asp / https: //) का उपयोग करना चाह सकते हैं developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) यह तत्व इस उद्देश्य के लिए है। यह एक div की तरह व्यवहार करता है, लेकिन तालिका के माता-पिता की पूरी चौड़ाई को नहीं फैलाता है (जैसे div एक ही स्थिति में करेगा (घर पर यह कोशिश न करें!)), इसके बजाय, यह चौड़ाई को फैलाता है! तालिका। सीमाओं के साथ कुछ क्रॉस-ब्राउज़र मुद्दे हैं और ऐसा (मेरे लिए स्वीकार्य था)। वैसे भी, आप इसे एक सेल के रूप में देख सकते हैं जो सभी स्तंभों को फैलाता है। भीतर, आप तत्वों को जोड़कर पंक्तियाँ बना सकते हैं। मुझे यकीन नहीं है कि आप इसे त्रि-तत्वों के बीच सम्मिलित कर सकते हैं, लेकिन यह एक हैक होगा जो मुझे लगता है (इसलिए अनुशंसित नहीं है)। एक अन्य विकल्प फ्लोटिंग डिव्स के साथ खिलवाड़ होगा, लेकिन यह है!

करना

<table>
    <caption style="gimme some style!"><!-- Title of table --></caption>
    <thead><!-- ... --></thead>
    <tbody><!-- ... --></tbody>
</table>

नहीं

<div>
    <div style="float: left;/* extra styling /*"><!-- Title of table --></div>
    <table>
        <thead><!-- ... --></thead>
        <tbody><!-- ... --></tbody>
    </table>
    <div style="clear: both"></div>
</div>

1
वास्तव में क्या मैं एक datatable के नीचे पृष्ठ पर अंक लगाना नियंत्रण खोज रहा था। यह पूरी तरह से काम करता है। आपका बहुत बहुत धन्यवाद।
कॉमेंकाऊ

5
यदि आप किसी तालिका के मध्य में सभी कॉल को अलग करना चाहते हैं तो यह काम नहीं करता है..चुनें संबंधित समूहों के बीच विभाजक द्वारा समूह के रूप में। (क्रोम)
डेविड हेमपी

17

आंशिक उत्तर के रूप में, यहां कुछ बिंदुओं के बारे colspan="0"में बताया गया है, जिनका उल्लेख प्रश्न में किया गया था।

tl; डॉ वर्जन:

colspan="0"किसी भी ब्राउज़र में काम नहीं करता है। W3Schools गलत है (हमेशा की तरह)। HTML 4 में कहा गया है कि colspan="0"पूरे टेबल पर एक कॉलम होना चाहिए, लेकिन किसी ने भी इसे लागू नहीं किया और इसे HTML 4 के बाद कल्पना से हटा दिया गया।

कुछ और विस्तार और सबूत:

  • सभी प्रमुख ब्राउज़र इसके बराबर मानते हैं colspan="1"

    यहाँ एक डेमो यह दिखा रहा है; आप इसे किसी भी ब्राउज़र पर आज़माएं।

    td {
      border: 1px solid black;
    }
    <table>
      <tr>
        <td>ay</td>
        <td>bee</td>
        <td>see</td>
      </tr>
      <tr>
        <td colspan="0">colspan="0"</td>
      </tr>
      <tr>
        <td colspan="1">colspan="1"</td>
      </tr>
      <tr>
        <td colspan="3">colspan="3"</td>
      </tr>
      <tr>
        <td colspan="1000">colspan="1000"</td>
      </tr>
    </table>

  • एचटीएमएल 4 कल्पना (अब पुराने और पुरानी है, लेकिन मौजूदा वापस जब यह प्रश्न पूछा गया था) था वास्तव में कहना है कि colspan="0"सभी स्तंभों में फैले के रूप में व्यवहार किया जाना चाहिए:

    मान शून्य ("0") का अर्थ है कि सेल वर्तमान स्तंभ से स्तंभ समूह (COLGROUP) के अंतिम स्तंभ तक सभी स्तंभों को फैलाता है जिसमें सेल को परिभाषित किया जाता है।

    हालांकि, अधिकांश ब्राउज़रों ने इसे कभी लागू नहीं किया।

  • HTML 5.0 (2012 में एक उम्मीदवार की अनुशंसा वापस की गई), व्हाट्सएप HTML जीवन स्तर (आज का प्रमुख मानक), और नवीनतम W3 HTML 5 कल्पना सभी में ऊपर HTML 4 से उद्धृत शब्द नहीं है, और सर्वसम्मति से सहमत हैं कि colspan0 का अनुमति नहीं है, इस शब्दांकन के साथ जो तीनों स्पेक्स में दिखाई देता है:

    tdऔर thतत्वों एक हो सकता है colspanसामग्री की विशेषता में निर्दिष्ट है, जिसका मान शून्य से एक वैध गैर नकारात्मक पूर्णांक अधिक होना चाहिए ...

    सूत्रों का कहना है:

  • प्रश्न में जुड़े W3Schools पृष्ठ के निम्नलिखित दावे हैं - कम से कम आजकल - पूरी तरह से गलत:

    केवल फ़ायरफ़ॉक्स colspan = "0" का समर्थन करता है, जिसका एक विशेष अर्थ है ... [यह] सेल को स्तंभ समूह (कॉलग्रुप) के अंतिम कॉलम में फैलाने के लिए कहता है

    तथा

    HTML 4.01 और HTML5 के बीच अंतर

    कोई नहीं।

    यदि आप पहले से ही इस बात से अवगत नहीं हैं कि W3Schools को आमतौर पर वेब डेवलपर्स द्वारा इसके लगातार अशुद्धियों के लिए अवमानना ​​में रखा जाता है, तो इस पर एक सबक पर विचार करें।


4
हाहा मुझे पसंद है कि कैसे उपयोगी एपीआई सुविधाओं को पूरी तरह से हटा दिया जाता है जब कोई भी उन्हें लागू करने के लिए चारों ओर नहीं जाता है। अद्भुत प्रक्रिया।
एंड्रयू कोस्टर

14

IE 6 के लिए, आप अपनी तालिका में स्तंभों की संख्या के बराबर colspan करना चाहेंगे। यदि आपके पास 5 कॉलम हैं, तो आप चाहेंगे colspan="5":।

कारण यह है कि IE अलग से colspans संभालता है , यह HTML 3.2 विनिर्देशन का उपयोग करता है:

IE HTML 3.2 परिभाषा को लागू करता है, यह इस प्रकार सेट होता colspan=0है colspan=1

बग अच्छी तरह से प्रलेखित है


1
कॉलम की मात्रा परिवर्तनशील हो सकती है, मैं उस टिप्पणी को शामिल करने के लिए अपने प्रश्न को अपडेट करूंगा।
बॉब '

जबकि शीर्ष पैराग्राफ में सलाह समझदार लगती है, मुझे लगता है कि यहाँ कई विवरण बिल्कुल सही नहीं हैं। HTML 3.2 कल्पना का कहना है कि colspanरों होना चाहिए सकारात्मक पूर्णांक है, जो बनाता है colspan=0अवैध; कहीं यह स्पष्ट रूप से तय नहीं करता है कि colspan=0इसे संभालना चाहिए colspan=1(हालांकि मुझे यकीन है कि वास्तव में IE 6 करता है)। इसके अलावा, आपके द्वारा लिंक किए गए फ़ोरम पृष्ठ पर कहीं भी उद्धरण (अब नहीं है?) और Google खोज परिणामों के अधिकांश (अब?) पूरी तरह से अलग IE 6 colspan- संबंधित बग के बारे में हैं।
मार्क एमी

11

यदि आप jQuery का उपयोग कर रहे हैं (या इसे जोड़ने में कोई आपत्ति नहीं है), तो यह इनमें से किसी भी हैक से बेहतर काम करेगा।

function getMaxColCount($table) {
    var maxCol = 0;

    $table.find('tr').each(function(i,o) {
        var colCount = 0;
        $(o).find('td:not(.maxcols),th:not(.maxcols)').each(function(i,oo) {
            var cc = Number($(oo).attr('colspan'));
            if (cc) {
                colCount += cc;
            } else {
                colCount += 1;
            }
        });
        if(colCount > maxCol) { maxCol = colCount };
    });

    return maxCol;

}

कार्यान्वयन को आसान बनाने के लिए, मैं किसी भी td / th को सजाता हूँ जिसे मुझे "maxCol" जैसे वर्ग के साथ समायोजित करने की आवश्यकता है, तो मैं निम्नलिखित कर सकता हूँ:

$('td.maxcols, th.maxcols').each(function(i,o) {
    $t = $($(o).parents('table')[0]); $(o).attr('colspan',  getMaxColCount($t));
});

यदि आपको एक कार्यान्वयन मिल जाता है तो यह काम नहीं करेगा, उत्तर को स्लैम न करें, टिप्पणियों में समझाएं और यदि इसे कवर किया जा सकता है तो मैं अपडेट करूंगा।


1
बहुत अच्छा होगा यदि आपके पास एक वैनिला JS संस्करण है
jpaugh

क्या आपके पास एक सामान्य उपयोग का मामला है जिसमें $ (चयनकर्ता) समर्थन की कमी है या बस इसका उपयोग नहीं करना चाहते हैं?
रेनबा

1
न तो। मैं बस उत्सुक हूं कि क्या jQuery यहां कोई लाभ जोड़ता है; यह एक बहुत बड़ी शर्त है, और यह यहाँ केवल अपने न्यूनतम उपयोग की तरह दिखता है।
जेपी हंसी

काफी उचित। JQuery और कोणीय के बीच, यह दुर्लभ है कि मेरे पास वे उपकरण नहीं हैं इसलिए मैं उनके लिए डिफ़ॉल्ट हूं। मैं इसे किसी और के लिए छोड़ दूँगा, हालांकि अभी के लिए वेनिला संस्करण के साथ आऊँगा।
रेनबा

1
चूंकि jQuery कुछ पुराना है इसलिए मैंने एक es6 संस्करण / उत्तर जोड़ा है (इस उत्तर को पूरी तरह से अलग कोड के साथ अपडेट नहीं करना चाहता)।
सिजिटी

5

एक और काम कर रहा है, लेकिन बदसूरत समाधान:, colspan="100"जहां 100 आपके द्वारा आवश्यक कुल स्तंभों से बड़ा मूल्य है colspan

W3C के अनुसार, colspan="0"विकल्प केवल COLGROUPटैग के साथ मान्य है ।


colspan = "100" (सीमा से परे) कुछ मामलों में बहुत ही अजीब तालिका प्रदान कर सकता है (मैं कुछ परीक्षण मामलों का शिकार करने और URL पोस्ट करने की कोशिश करूंगा)
scunliffe

-1 क्योंकि जहां तक ​​मैं निर्धारित कर सकता हूं कि अंतिम पैराग्राफ में दावा गलत है। HTML 4 के पास अनुमति देता <td>है colspan="0"( w3.org/TR/REC-html40/struct/tables.html#adef-colspan देखें ), जबकि HTML 5.0 span="0"a पर अनुमति नहीं देता है colgroup(देखें w3.org/TR/html50/tabular- data.html # attr-colgroup-span जो बताता है कि "एक अवधि सामग्री विशेषता ['s] मान शून्य से अधिक एक वैध गैर-नकारात्मक पूर्णांक होना चाहिए।" )।
मार्क अमेरी

2

नीचे एक संक्षिप्त es6 समाधान है ( रैनाबाबा के उत्तर के समान लेकिन jQuery के बिना)।

Array.from(document.querySelectorAll('[data-colspan-max]')).forEach(td => {
    let table = td;
    while (table && table.nodeName !== 'TABLE') table = table.parentNode;
    td.colSpan = Array.from(table.querySelector('tr').children).reduce((acc, child) => acc + child.colSpan, 0);
});
html {
  font-family: Verdana;
}
tr > * {
  padding: 1rem;
  box-shadow: 0 0 8px gray inset;
}
<table>
<thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
    <th>Header 5</th>
    <th>Header 6</th>
  </tr>
</thead>
<tbod><tr>
  <td data-colspan-max>td will be set to full width</td>
</tr></tbod>
</table>


-1

बस मैं अपने अनुभव जोड़ना चाहता हूं और इसका जवाब देना चाहता हूं।
नोट: यह केवल तभी काम करता है जब आपके पास पूर्व-परिभाषित tableऔर एस के trसाथ हो th, लेकिन आपकी पंक्तियों में लोड हो रहा है (उदाहरण के लिए AJAX के माध्यम से) गतिशील रूप से।

इस स्थिति में आप thअपनी पहली हेडर पंक्ति में संख्याओं की गिनती कर सकते हैं, और इसका उपयोग पूरे कॉलम को करने के लिए कर सकते हैं।

यह तब आवश्यक हो सकता है जब आप किसी संदेश को रिलेट करना चाहते हैं जब कोई परिणाम नहीं मिला है।

JQuery में ऐसा कुछ है, जहां tableआपकी इनपुट तालिका है:

var trs = $(table).find("tr");
var numberColumns = 999;
if (trs.length === 1) {
    //Assume having one row means that there is a header
    var headerColumns = $(trs).find("th").length;
    if (headerColumns > 0) {
        numberColumns = headerColumns;
    }
}

इस से पहले पोस्ट किए गए जावास्क्रिप्ट समाधान की तरह , यह अच्छी तरह से सामान्य नहीं करता है; एस की संख्या thआवश्यक रूप से कॉलम की संख्या नहीं है, क्योंकि उनमें से कुछ में एक colspanसेट हो सकता है , और इसलिए यह सभी के लिए लिखित रूप में काम नहीं करेगा।
मार्क अमेरी

-2

शायद मैं एक सीधा विचारक हूं, लेकिन मैं थोड़ा हैरान हूं, क्या आपको अपनी तालिका का कॉलम नंबर नहीं पता है?

वैसे IE6 कोलस्पैन = "0" का सम्मान नहीं करता है, साथ या परिभाषित एक कोलग्रुप के बिना। मैंने स्तंभों के समूहों को उत्पन्न करने के लिए थ्रेड और वें का उपयोग करने की भी कोशिश की, लेकिन ब्राउज़र प्रपत्र colspan = "0" को नहीं पहचानता है।

मैंने विंडोज़ और लाइनक्स पर फ़ायरफ़ॉक्स 3.0 के साथ कोशिश की है और यह केवल सख्त सिद्धांत के साथ काम करता है।

आप कई बॉलर पर एक परीक्षण की जाँच कर सकते हैं

http://browsershots.org/http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

मुझे यहाँ परीक्षा पृष्ठ http://hsivonen.iki.fi/test/wa10/tables/colspan/.html मिला

संपादित करें: कृपया लिंक को कॉपी और पेस्ट करें, स्वरूपण लिंक में दोहरे प्रोटोकॉल भागों को स्वीकार नहीं करेगा (या मैं सही ढंग से प्रारूपित करने के लिए इतना स्मार्ट नहीं हूं)।


मैं पहले भाग के बारे में सहमत हूँ: निश्चित रूप से आप यह पता लगा सकते हैं कि आप पंक्ति में कितनी कोशिकाएँ रखने जा रहे हैं? आप इसे और कैसे उत्पन्न करेंगे?
निकफ

13
जरूरी नहीं है, मेरे पास एक AJAX गतिशील रूप से उत्पन्न तालिका के साथ एक ऐप है और कॉलम की संख्या कॉलबैक से कॉलबैक में बदल सकती है। इसके अलावा, जब आप स्तंभों की संख्या को "जानते हैं" विकसित कर सकते हैं, लेकिन यह बदल सकता है और आप बस जानते हैं कि आप इनमें से एक को याद करेंगे
मैड हाफलिंग

11
यदि आप बाद में कॉलम जोड़ते हैं, तो आप कॉलस्पैन को बदलना भूल सकते हैं, बेहतर है कि हमेशा अधिकतम हो।
एडम

-2

विनिर्देश के अनुसार colspan="0"तालिका चौड़ाई td में परिणाम होना चाहिए।

हालाँकि, यह केवल तभी सही है जब आपकी तालिका में चौड़ाई हो! एक तालिका में विभिन्न चौड़ाई की पंक्तियाँ हो सकती हैं। तो, केवल मामला है कि रेंडरर तालिका की चौड़ाई जानता है यदि आप एक कोलग्रुप को परिभाषित करते हैं ! अन्यथा, colspan = "0" का परिणाम अनिश्चित है ...

http://www.w3.org/TR/REC-html40/struct/tables.html#adef-colspan

मैं पुराने ब्राउज़रों पर इसका परीक्षण नहीं कर सकता, लेकिन यह 4.0 के बाद से विनिर्देश का हिस्सा है ...


"यह 4.0 के बाद से विनिर्देशन का हिस्सा है" - नहीं, बिल्कुल नहीं। यह विनिर्देशन का हिस्सा था , लेकिन इसे HTML 5 में हटा दिया गया था और colspan0 का अवैध बना दिया गया था। दोनों w3.org/TR/html50/… (HTML 5.0 कल्पना) और HTML.spec.whatwg.org/multipage/… (नवीनतम व्हाट्सएप HTML लिविंग स्टैंडर्ड) राज्य जो colspanशून्य से अधिक होना चाहिए। और जैसा कि यहां अन्य उत्तरों में बताया गया है, ब्राउज़र ने वास्तव में पुराने एचटीएमएल 4 व्यवहार को कभी लागू नहीं किया है जिसे आप उद्धृत करते हैं।
मार्क अमेरी

-6

"colsppan" के बजाय "colSpan" का उपयोग करने का प्रयास करें। IE कैमलबैक संस्करण को पसंद करता है ...


4
केवल जब IE का उपयोग कर रहा है और जावास्क्रिप्ट और .setAttribute ('colSpan', int) के माध्यम से सेटिंग; ध्यान दें कि यह IE8 में निर्धारित किया गया था (केवल
स्टड

1
+1 - मुझे यह नहीं पता था और यह एक बहुत बड़ी मदद थी! मुझे नहीं लगता था कि colSpan ने IE6 में भी काम किया था।
17
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.