/ / तालिका और इसकी कोशिकाओं को ठीक करने के लिए मजबूर करना - एचटीएमएल, एचटीएमएल 5

तालिका और इसकी कोशिकाओं को ठीक करने के लिए मजबूर करना - एचटीएमएल, एचटीएमएल 5

मैं एक वेब टेम्पलेट के साथ काम कर रहा हूं, जिसने सीएसएस फ़ाइल के अंदर निम्नलिखित को परिभाषित किया है: -

div.dataTables_length select {
width: 50px;
}
.dataTables_filter input, .dataTables_length select {
display: inline-block;
margin-bottom: 0;
}

और तालिका को निम्नानुसार परिभाषित किया गया है: -

<div class="box-content">
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th></th> <th></th>
</tr></thead>
<tbody>
<tr>

बीटीयू वर्तमान में मुझे एक समस्या का सामना करना पड़ रहा है किटेम्पलेट स्वचालित रूप से मूल्य को छोटा कर देगा और इसका केवल एक हिस्सा प्रदर्शित करेगा। तो उदाहरण के लिए यदि कोई लंबा वर्णन मूल्य है तो सेल इसका हिस्सा प्रदर्शित कर सकता है। तो तालिका को संशोधित करने का कोई तरीका है ताकि इसमें निम्नलिखित होंगे: -

  1. टेबल सेल में हमेशा एक ही चौड़ाई होगी, लेकिन गतिशील ऊंचाई होगी।
  2. तालिका में हमेशा एक ही चौड़ाई होनी चाहिए, इसलिए लंबे टेक्स्ट होने पर यह लेआउट से बाहर नहीं जायेगा।
  3. प्रत्येक फ़ील्ड का पूरा पाठ प्रदर्शित करने के लिए, और सेल परमाणु रूप से एक नई रेखा पर जाना चाहिए।

सादर

::: संपादित करें :::

इस प्रकार तालिका प्रदर्शित की जाएगी तालिका तालिका कॉलम में लंबे परीक्षण शामिल हैं: -

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

उत्तर:

उत्तर № 1 के लिए 1

टिप्पणियों में छंटनी का सवाल पहले से ही संबोधित किया जा चुका है। मैं तालिका की चौड़ाई को संबोधित करूंगा।

यदि आप किसी तालिका कॉलम की चौड़ाई निर्धारित करना चाहते हैं तो आपको या तो सभी कॉलम के लिए समान चौड़ाई सेट करने या कुछ कॉलम को विशिष्ट चौड़ाई देने की आवश्यकता है।

.table th, .table td { width: 50px; } /* sets the default value of all columns */
.table .name { width: 100px; word-wrap: break-word; } /* overrides the default with specific value for certain column*/

<table class="table">
<tr>
<td class="name">James T. Kirk</td>
<td class="name">Spock</td>
</tr>
</table>

मैं स्तंभ चौड़ाई पर प्रतिशत (%) का उपयोग करने से दूर रहूंगा, खासकर यदि टेक्स्ट लंबाई में उतार-चढ़ाव करेगा।

संपादित करें - मुझे पता है तुम्हारा क्या मतलब है। आपको वर्ड-रैप की सीएसएस शैली डालना होगा: ब्रेक-वर्ड; मैंने ऊपर दिए गए कोड को अपडेट किया और एक बनाया jsfiddle डेमो।