टेबल-सेल - कुछ प्रकार का कोलस्पेन?

Question

मैं अभी थोड़ा परेशान हूं, क्योंकि मेरे पास सीएसएस कोड था जो काम करता था, लेकिन यह बिल्कुल सुंदर नहीं था। अब मैं इस सीएसएस शैलियों को फिर से काम करना चाहता हूं और उन्हें कम से कम बनाना चाहता हूं। और मुझे display:table;/display:table-row; और display:table-cell; के साथ बड़ी समस्याएं हैं।

उदाहरण के लिए मैं निम्नलिखित कोड है: http://jsfiddle.net/La3kd/2/

मैं इसे कैसे कर सकते हैं कि पिछले सेल (बीच में) सही करने के लिए ऊपर दूसरे सेल में शिफ्ट नहीं करता है? अंतिम सेल में उपरोक्त 2 कोशिकाओं की चौड़ाई होनी चाहिए। किसी प्रकार की कोस्पैन की आवश्यकता होती है। यह बहुत अजीब है, क्योंकि मेरे पास यह धारणा है कि मैंने कोड को फिर से काम करने से पहले काम किया था। लेकिन अब दाईं ओर के सभी तत्व पूरी तरह से स्थानांतरित हो गए हैं।

Answer 1

सीएसएस में colspan एनालॉग नहीं है। आपके उदाहरण के आधार पर, आप अपनी अंतिम पंक्ति को अलग-अलग ब्लॉक के रूप में चिह्नित कर सकते हैं।

आप display: table-caption का उपयोग caption-side: bottom के साथ तालिका पंक्ति को अंतिम "पंक्ति" के रूप में प्रदर्शित करने के लिए भी कर सकते हैं जो सभी स्तंभों को फैलाता है। live demo देखें।

Answer 2

एक विचार पूर्ण स्थिति का लाभ उठाना होगा। संबंधित स्थिति तालिका के चारों ओर एक रैपर, तो सभी पूर्ण स्थिति रैपर के लिए केंद्रित समन्वय हो जाता है। निचे देखो। नोटिस मैं टेबल की एक श्रेणी को परिभाषित करता हूं, जो सेट स्थिति होगा: सापेक्ष, फिर तालिका की कक्षा को परिभाषित करें और - मुझे लगता है कि आप सेट करेंगे .tableRow div {display: table-cell; } इसलिए मैंने प्रत्येक div पर एक कक्षा डालने से परेशान नहीं किया। अगर इसे दूसरी div से बड़ा हो जाता है तो आपको इसे नीचे दिए गए div को ओवरलैप करने से रोकने के लिए एक रास्ता खोजना होगा। बहुत कामयाब होना चाहिए।

<div class="tableWrapper"> 
    <div class="tableRow"> 
    <div>Column 1</div> 
    <div>Column 2</div> 
    </div> 

    <div class="tableRow"> 
     <div style="border: 1px solid black; position: absolute; width: 100%;">appears like colspan=2</div> 
     <div>&nbsp; (only here to force a row break before the next table row)</div> 
    </div> 

    <div class="tableRow"> 
    <div>Column 1</div> 
    <div>Column 2</div> 
    </div> 
</div> 

Answer 3

टेबल शीर्षक यदि आप शीर्ष लेख और पाद पंक्ति की जरूरत है एक अच्छा विचार है स्तंभों की परवाह किए बिना चौड़ाई ... पूर्ण स्थिति है जब आपके पाठ लाइन खिला कम से कम एक बार फिर अन्य कोशिकाओं की तुलना में है, सिवाय इसके अच्छा काम करता है उस पंक्ति में ...

तो यहाँ

एक संवेदनशील तालिका की पंक्तियां के बीच में शीर्ष लेख है और तालिका हेडर सामग्री (जो महत्वपूर्ण है अगर तालिका डायनामिक रूप से किया जाता है) के अनुसार लाइन फ़ीड के लिए सुनिश्चित करने के लिए एक छद्म समाधान है । मैं भी रूप में अच्छी तरह कॉल्सपन का एक प्रकार को शामिल किया है (हालांकि रेखा खिला नहीं सही ढंग से):

सीएसएस:

.table 
{ display:table; 
    position:relative; 
} 
.table > .header 
{ display:table-caption; 
    position:absolute; 
    left:0; 
    right:0; 
} 
.table > .l50{right:50%;} 
.table > .r50{left:50%;} 

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

.table > .row > *{display:table-cell;} 

/* We add an extra cell where neededed to allow or header repositioning using % instead of fixed units */ 
.table > .header + .row > :last-child 
{ width:1%; 
    max-width:1px; 
    overflow:hidden; 
    visibility:hidden; 
} 

.table > .header + .row > :last-child > div 
{ float:left; 
    display:inline; 
    visibility:hidden; 
    width:10000%;/* 100% = parent element width (1%) ⇒ 100*100% = gran-parent element width*/ 
} 
.table > .header + .row > :last-child > div > .l50 
.table > .header + .row > :last-child > div > .r50{width:5000%;} 

/* No responsive line-feed thought it's possible using % to estimate the size the span should take but it's not accurate (see HTML render) */ 
.table > .row > div > .span{position:absolute;left:0;right:33%;} 
/* THIS MAKES SURE TRADITIONAL CELLS ARE VISIBLE */ 
.table > .row > .top 
{ position:relative; 
    z-index:1; 
} 

http://jsfiddle.net/sp2U4/

Answer 4

मैं jQuery और table-layout: fixed का उपयोग कर एक समाधान मिल गया। यहाँ मेरी बेला है: http://jsfiddle.net/emilianolch/5nvxv5ko/

HTML:

<div class="table"> 
    <div class="table-row"> 
     <div class="table-cell"> 
      top left cell 
     </div> 
     <div class="table-cell"> 
      top right cell 
     </div> 
    </div> 
    <div class="table-row"> 
     <div class="table-cell colspan"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </div> 
    </div> 
    <div class="table-row"> 
     <div class="table-cell"> 
      bottom left cell 
     </div> 
     <div class="table-cell"> 
      bottom right cell 
     </div> 
    </div> 
</div> 

सीएसएस:

.table { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
    border-collapse: collapse; 
} 

.table-row { 
    display: table-row; 
    border-collapse: collapse; 
} 

.table-cell { 
    display: table-cell; 
    padding: 5px; 
    border: 1px solid black; 
} 

.table-cell.colspan { 
    display: none; 
    /* collapse border */ 
    margin-top: -1px; 
    margin-bottom: -1px; 
} 

जे एस:

var rowWidth = $('.table-row:first').width(); 
var colWidth = $('.table-cell:first').width(); 
var marginRight = colWidth - rowWidth + 11; 
$('.table-cell.colspan').css('margin-right', marginRight + 'px').show() 

Answer 5

कोई वास्तविक तालिका का उपयोग करें जब आप प्राप्त करने के लिए ऐसा करने के लिए मजबूर किया जाता है वह लेआउट जो आप चाहते हैं।

लेआउट के लिए तालिका का उपयोग न करने का एकमात्र आवश्यक कारण यह है कि अंधे के लिए एक बोलने वाला ब्राउज़र प्रत्येक तालिका कक्ष की पंक्ति संख्या और स्तंभ संख्या निर्देशांक देता है।जब टेबल कोशिकाओं का उपयोग लेआउट के लिए किया जाता है तो यह अंधे पाठक को भ्रमित करता है।

बेशक

, यह बहुत मार्जिन, बॉर्डर, और गद्दी, जहां वे काम ज्यादा उन्हें तालिकाओं के साथ faking से बेहतर कर उपयोग करने के लिए आसान है, लेकिन जब आप एक लेआउट के साथ कुछ एक अखबार के समान है चाहता हूँ-विज्ञापन पृष्ठ, यह एक असली टेबल, नेस्टेड टेबल का एक सेट, या divs से भरा एक टेबल का उपयोग करने के लिए बेहतर है।

मैं हमेशा div का उपयोग करेगा या div प्रदर्शन तालिका भागों के साथ एक मेज faking जब वे काम करते हैं।

जब वे काम नहीं करते हैं, या जब div लेआउट भिन्न स्क्रीन रिजोल्यूशन पर अलग गिर जाता है, मैं एक असली मेज का प्रयोग करेंगे। यह कभी अलग नहीं होता है।

W3C द्वारा इस kludgery बोल ब्राउज़र को बताने के लिए एक तालिका के रूप में एक वास्तविक तालिका इलाज नहीं करने के लिए एक सीएसएस कोड के साथ एक बेहतर समाधान पड़ता था।

मैं भी चारों ओर तालिका डेटा के रूप में पृष्ठ का शीर्षक व्यवस्था की टिप्पणियों का एक तालिका का इलाज, भले ही यह संख्यात्मक नहीं है। टैब्यूलर डेटा में स्पष्ट डेटा शामिल हो सकता है।

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

Answer 6

अपनी आवश्यकताओं के आधार पर, flexbox लेआउट को पूरा कर सकते हैं कि आप क्या देख रहे हैं। डेमो

div.table{ 
    display:block; 
    width:100%; 
} 

div.table >div{ 
    display:flex; 
    width:100%; 
    border:1px solid gray; 
    flex-direction:horizonal; 
} 
div.table > div >div{ 
    display: block; 
    flex-grow:1; 
    border-bottom:1px solid #ddd; 
    vertical-align: middle; 
    height:30px; 
    padding:4px; 
} 

देखें:

http://jsbin.com/mimegodiba/edit?html,css,output

की