एचटीएमएल टेबल: कॉलम चौड़ाई प्रतिशत

Question

मेरे पास 7 कॉलम वाली एक टेबल है। मैं अगले कॉलम चौड़ाई की होना चाहते हैं:

• 3 कॉलम एक्स width=20%
• 4 कॉलम एक्स width=10%

2 सीएसएस कक्षाएं, चौड़ाई प्रति एक बनाया है और मैं उन्हें करने के लिए बताए हूँ प्रत्येक सेल

मेरे पास जो चीज है, और यह काम नहीं करता है। इसके बजाए, चौड़ाई हमेशा सामग्री को लपेटती है। अगर मैं सिर्फ एक अक्षर डालता हूं, तो चौड़ाई बहुत छोटी होगी, अगर मैं बड़ी स्ट्रिंग डालता हूं, तो चौड़ाई बहुत बड़ी होगी। मैं इसे स्थिर रखना चाहता हूँ।

सीएसएस & HTML:

table { 
 
    width: 100%; 
 
} 
 
.ten { 
 
    width: 10% 
 
} 
 
.twenty { 
 
    width: 20%; 
 
}

<table> 
 
    <tr> 
 
    <th class="ten">H1</th> 
 
    <th class="ten">H2</th> 
 
    <th class="ten">H3</th> 
 
    <th class="twenty">H4</th> 
 
    <th class="twenty">H5</th> 
 
    <th class="twenty">H6</th> 
 
    <th class="ten">H7</th> 
 
    </tr> 
 

 
    <tr> 
 
    <td class="ten">A1</td> 
 
    <td class="ten">A2</td> 
 
    <td class="ten">A3</td> 
 
    <td class="twenty">A4</td> 
 
    <td class="twenty">A5</td> 
 
    <td class="twenty">A6</td> 
 
    <td class="ten">A7</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td class="ten">B1</td> 
 
    <td class="ten">B2</td> 
 
    <td class="ten">B3</td> 
 
    <td class="twenty">B4</td> 
 
    <td class="twenty">B5</td> 
 
    <td class="twenty">B6</td> 
 
    <td class="ten">B7</td> 
 
    </tr> 
 

 
</table>

कोई समझा सकते हैं कि कैसे प्राप्त करने के लिए मैं क्या करना चाहते हैं?

Answer 1

चौड़ाई को ठीक करने के लिए, आप table-layout:fixed; का उपयोग कर सकते हैं।

आप अपने कॉलम पर एक बार चौड़ाई और बीजी असाइन करने के लिए colgroup and col टैग का भी उपयोग करना चाह सकते हैं।

table { 
 
    width: 100%; 
 
    table-layout: fixed; 
 
} 
 
.ten { 
 
    width: 10%; 
 
    background: tomato; 
 
} 
 
.twenty { 
 
    width: 20%; 
 
    background: turquoise 
 
} 
 
/* see me */ 
 
td { 
 
    border: solid; 
 
} 
 
/* play with bg cells and cols ? */ 
 

 
tr:nth-child(even) :nth-child(odd) { 
 
    background:rgba(100,255,50,0.3); 
 
    } 
 
tr:nth-child(odd) :nth-child(even) { 
 
    background:rgba(255,255,255,0.3); 
 
    }

<table> 
 
    <colgroup> 
 
    <col class="ten" /> 
 
    <col class="ten" /> 
 
    <col class="ten" /> 
 
    <col class="twenty" /> 
 
    <col class="twenty" /> 
 
    <col class="twenty" /> 
 
    <col class="ten" /> 
 
    </colgroup> 
 
    <tr> 
 
    <th>H1</th> 
 
    <th>H2</th> 
 
    <th>H3</th> 
 
    <th>H4</th> 
 
    <th>H5</th> 
 
    <th>H6</th> 
 
    <th>H7</th> 
 
    </tr> 
 

 
    <tr> 
 
    <td>A1</td> 
 
    <td>A2</td> 
 
    <td>A3</td> 
 
    <td>A4</td> 
 
    <td>A5</td> 
 
    <td>A6</td> 
 
    <td>A7</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>B1</td> 
 
    <td>B2</td> 
 
    <td>B3</td> 
 
    <td>B4</td> 
 
    <td>B5</td> 
 
    <td>B6</td> 
 
    <td>B7</td> 
 
    </tr> 
 
<tr> 
 
    <td>A1</td> 
 
    <td>A2</td> 
 
    <td>A3</td> 
 
    <td>A4</td> 
 
    <td>A5</td> 
 
    <td>A6</td> 
 
    <td>A7</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>B1</td> 
 
    <td>B2</td> 
 
    <td>B3</td> 
 
    <td>B4</td> 
 
    <td>B5</td> 
 
    <td>B6</td> 
 
    <td>B7</td> 
 
    </tr> 
 

 
</table>

Answer 2

अगली पंक्ति में लंबे शब्द अपने सीएसएस करने के लिए इस जोड़े

td { 
    word-break: break-all; 
    //or 
    word-wrap: break-word; 
} 

word-break: break-all; wraps, लेकिन एक शब्द रखेंगे पूरे

max-dimension 

बन जाएगा

max- 
dimension 

जबकि word-wrap: break-word होगा जब तक यह सेल फिट होगा तब तक किसी भी शब्द को किसी भी शब्द काट दें।

max-dimension 

बन सकता है

max-dim 
ension 

Answer 3

आपका सीएसएस अपेक्षा के अनुरूप काम करता है, एक तरीका है कि तालिका सिर और कोशिकाओं की चौड़ाई सही हैं में। हालांकि:

th डिफ़ॉल्ट रूप से टेक्स्ट-संरेखण है: केंद्र लागू होता है, जबकि td तत्व नहीं है।

तो आपको या तो टीडी या वही टेक्स्ट संरेखण में जोड़ना चाहिए। उदा।

th { 
    text-align: left; 
}