निश्चित तालिका सेल चौड़ाई

Question

बहुत सारे लोग अभी भी तालिकाओं का उपयोग लेआउट नियंत्रण, डेटा आदि के लिए करते हैं - इसका एक उदाहरण लोकप्रिय jqGrid है। हालाँकि, ऐसा कुछ जादू हो रहा है कि मुझे कठपुतली लगती है (इसके रोने के लिए तालियाँ बजती हैं, वहाँ कितना जादू हो सकता है?)

टेबल की कॉलम की चौड़ाई को सेट करना कैसे संभव है और क्या इसका पालन करना चाहिए जैसे कि jqGrid करता है !? अगर मैं इसे दोहराने की कोशिश करता हूं, भले ही मैं हर सेट करता हूं <td style='width: 20px'>, जैसे ही उन कोशिकाओं में से एक की सामग्री 20px से अधिक हो जाती है, सेल का विस्तार होता है!

किसी भी विचार या अंतर्दृष्टि?

Answer 1

आप <col>सभी पंक्तियों के लिए टैग प्रबंधन तालिका स्टाइल का उपयोग करने का प्रयास कर सकते हैं, लेकिन आपको table-layout:fixedशैली को <table>या टेबल सीएसएस वर्ग पर सेट करने और overflowकोशिकाओं के लिए शैली सेट करने की आवश्यकता होगी

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

और यह आपका सीएसएस हो

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

Comments

col

— html

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

— thebdawk05

क्या होता है जब आपके पास केवल 1 टीडी तत्व के साथ पंक्तियाँ होती हैं जो कई स्तंभों को फैलाती हैं? अपने सैंपल कोड का उपयोग करते हुए, यदि आप <TD colspan="3">स्वयं एक पंक्ति में होते तो यह 90px होता?

— sab669

धन्यवाद इससे मदद मिली। डेटा ओवरलैपिंग के लिए, इसे जोड़ें table.fixed td { word-wrap: break-word; }।

— पराग त्यागी

शब्द-विराम सुझाव आवश्यक नहीं है, लेकिन यह एसओ के बाकी उपयोगकर्ताओं के लिए उपयोगी है और प्रश्न के लिए काफी प्रासंगिक है, क्योंकि निश्चित चौड़ाई तालिकाओं में सामग्री के अतिप्रवाह का अधिकांश परिदृश्यों में ocurr लगभग निश्चित है।

— एमी पेलेग्रिनी

Answer 2

HTML5 / CSS3 में अब हमारे पास समस्या का बेहतर समाधान है। मेरी राय में यह विशुद्ध रूप से CSS समाधान की सिफारिश की गई है:

table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/
table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/
table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/
table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/

<table class="fixed">
    <tr>
        <td>Veryverylongtext</td>
        <td>Actuallythistextismuchlongeeeeeer</td>
        <td>We should use spaces tooooooooooooo</td>
    </tr>
</table>

आपको हंटर के समाधानwidth में भी तालिका सेट करने की आवश्यकता है । अन्यथा यह काम नहीं करता है। इसके अलावा एक नई CSS3 सुविधा जिसे vsync ने सुझाया है: है । यह बिना रिक्त स्थान के शब्दों को कई लाइनों में तोड़ देगा। बस इस तरह कोड को संशोधित करें:
word-break:break-all;

table.fixed { table-layout:fixed; width:90px; word-break:break-all;}

अंतिम परिणाम

Comments

यदि आप एक पंक्ति को एक के साथ फेंकते हैं colspan, तो यह इस समाधान को तोड़ता है। colspan> 1 युक्त तालिका के साथ इस समाधान का उपयोग करने के बारे में कोई सुझाव ?

— एरिक के

@QuantumDynamix I ने इसे पहली पंक्ति, बिना कोल्पंस वाली एक पंक्ति, चौड़ाई वाले सभी व्यक्तिगत स्तंभों के रूप में शामिल करके तय किया। फिर मैंने उस पंक्ति को 0 ऊँचाई, सीमा: कोई नहीं, दृश्यता: छुपाया, पैडिंग: 0px इत्यादि के साथ छिपाया, फिर दूसरी पंक्ति वह पहली है जिसे मैं देखना चाहता हूँ जहाँ कोल्सपैन हैं। व्यक्तिगत निश्चित चौड़ाई कोशिकाओं के साथ पहली पंक्ति चौड़ाई स्थापित करती है।

— एरोनल्स

@totymedli कोई भी विचार मेरे सभी स्तंभ चौड़ाई के योग पर मेरी तालिका कैसे प्राप्त करें? मेरी तालिका गतिशील रूप से थोड़ी सी उत्पन्न होती है और मैं पहले से ही तालिका की चौड़ाई की गणना नहीं कर सकता, लेकिन मैं 100% का उपयोग नहीं करना चाहता क्योंकि यह मेरे तत्वों को फैलाता है।

— एरोनल्स

Answer 3

table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}

Comments

क्या आप वाकई table-layouttd तत्व पर उपयोग कर सकते हैं ?

— निक

@ निक - यह ठीक काम करता है। होवेवर I को न्यूनतम-चौड़ाई और अधिकतम-चौड़ाई की संपत्ति (चौड़ाई के समान मूल्य) भी जोड़ना होगा, और फिर यह वास्तव में निश्चित चौड़ाई बन गई।

— डेनिस खाय

Answer 4

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

<td><div style='width: 150px;'>Text to break here</div></td>

आपको किसी भी प्रकार की शैली को तालिका, ट्र तत्वों में निर्दिष्ट करने की आवश्यकता नहीं है। आप अतिप्रवाह का उपयोग भी कर सकते हैं: छिपा हुआ; जैसा कि अन्य उत्तरों द्वारा सुझाया गया है लेकिन यह अतिरिक्त पाठ के गायब होने का कारण बनता है।

Comments

या जहां जरूरत हो वहां चौड़ाई के बजाय अधिकतम चौड़ाई का उपयोग कर सकते हैं। यह आपको पाठ को तब तक नहीं तोड़ने देगा जब तक आप अपनी चौड़ाई सीमा तक नहीं पहुंच जाते। यदि आपका पाठ निर्दिष्ट चौड़ाई से छोटा है, तो टेबल सेल में खाली जगह नहीं होगी। <td> <div style = 'max-width: 150px;'> पाठ यहाँ तोड़ने के लिए </ div> </ td>

— तारिक

Answer 5

table { 
    table-layout:fixed; width:200px;
}
table tr {
    height: 20px;
}

10x10

Answer 6

पूर्ण चौड़ाई तालिका के लिए:

• तालिका की चौड़ाई 100% होनी चाहिए

• यदि N colunms की आवश्यकता है, तो TH MUST को N + 1 होना चाहिए

3 कॉलम के लिए उदाहरण:

table.fixed {
      table-layout: fixed;
      width: 100%;
    }
    table.fixed td {
      overflow: hidden;
    }

  <table class="fixed">
      <col width=20 />
      <col width=20 />
      <col width=20 />
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>FREE</th>
    </tr>
    <tr>
      <td>text111111111</td>
      <td>text222222222</td>
      <td>text3333333</td>
    </tr>
  </table>

Answer 7

table
{
  table-layout:fixed;
}
td,th
{
  width:20px; 
  word-wrap:break-word;
}

: पहला-बच्चा ...: nth-child (1) या ...