सीएसएस कॉलम-गिनती मेरी तालिका को दो अलग-अलग कॉलम में विभाजित करती है

Question

मैं अपने पृष्ठ पर अख़बार जैसी कॉलम बनाने की कोशिश कर रहा हूं। हालांकि, मेरे पृष्ठ में टेबल हैं, और आईई, क्रोम, सफारी और ओपेरा में, तालिका को दो अलग-अलग कॉलम में विभाजित किया जा रहा है; यह वह व्यवहार नहीं है जिसे मैं चाहता हूं। जहां एक टेबल है, मैं इसे पूरी तरह से एक कॉलम में रखना चाहता हूं। यहाँ कुछ कोड है:

.newspaper { 
 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 2; /* Firefox */ 
 
    column-count: 2; 
 
    -webkit-column-gap: 5px; /* Chrome, Safari, Opera */ 
 
    -moz-column-gap: 5px; /* Firefox */ 
 
    column-gap: 5px; 
 
}

<div class="newspaper"> 
 
    <table> 
 
    <tr><td>Table Row 1</td></tr> 
 
    <tr><td>Table Row 2</td></tr> 
 
    <tr><td>Table Row 3</td></tr> 
 
    <tr><td>Table Row 4</td></tr> 
 
    </table> 
 
    <p>Paragraph</p> 
 
</div>

इसके साथ समस्या और बेला को देखने के लिए एक आसान तरीका है क्रोम का उपयोग करें और http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-gap के पास जाकर मेरा साथ अपने उदाहरण में कोड पर पेस्ट करना है। यदि आप फ़ायरफ़ॉक्स का प्रयास करते हैं तो आप देखेंगे कि तालिका पूरी तरह से बाएं कॉलम में रहती है।

Answer 1

अपनी तालिका में column-break-inside: avoid; जोड़ें:

.newspaper { 
 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 2; /* Firefox */ 
 
    column-count: 2; 
 
    -webkit-column-gap: 10px; /* Chrome, Safari, Opera */ 
 
    -moz-column-gap: 10px; /* Firefox */ 
 
    column-gap: 10px; 
 
    border:dotted 1px #ccc; 
 
} 
 
.newspaper table { 
 
    -webkit-column-break-inside:avoid; 
 
    -moz-column-break-inside:avoid; 
 
    -o-column-break-inside:avoid; 
 
    -ms-column-break-inside:avoid; 
 
    column-break-inside:avoid; 
 
}

<div class="newspaper"> 
 
    <table> 
 
    <tr><td>Table Row 1</td></tr> 
 
    <tr><td>Table Row 2</td></tr> 
 
    <tr><td>Table Row 3</td></tr> 
 
    <tr><td>Table Row 4</td></tr> 
 
    </table> 
 
    <p>Paragraph</p> 
 
</div>

Answer 2

मैं तुम सिर्फ सीएसएस हटाने 2 कॉलम नहीं करना चाहते हैं कि तुम क्या यहाँ पूरा करने के लिए कोशिश कर रहे हैं पर% नहीं 100 ...

हूँ। http://plnkr.co/edit/UtvHv0V9cydAfnO4jFwH?p=preview

यदि आप पैराग्राफ को दाईं ओर रखना चाहते हैं तो तालिका को बाएं छोड़ दें। http://plnkr.co/edit/52ly416gGmtHhAZSyrC3?p=preview

table{ 
    float:left; 
} 

p{ 
    position:relative; 
    left: 20px; 
}