अपने कक्षों में पाठ की मात्रा की परवाह किए बिना तालिका स्तंभ की चौड़ाई स्थिर रखें?

Question

अपनी तालिका में मैंने पहले सेल की चौड़ाई को एक कॉलम में सेट किया 100px।
हालाँकि, जब इस कॉलम के किसी एक सेल में टेक्स्ट बहुत लंबा होता है, तो कॉलम की चौड़ाई अधिक हो जाती है 100px। मैं इस विस्तार को कैसे अक्षम कर सकता हूं?

Comments

stackoverflow.com/questions/1258416/word-wrap-in-a-html-table आपको सही दिशा में बात करने में मदद कर सकता है

— justinl

मेरे मामले में विस्तार नहीं हुआ, लेकिन इसके विपरीत: मेरी स्पष्ट चौड़ाई घोषणा के बावजूद चौड़ाई का अवांछित हटना। हास्यास्पद!

— Csaba Toth

इसका एकमात्र सही समाधान यह है कि इसमें कोलगेट्स के साथ कोलग्रुप का उपयोग करें, और कोल्स की चौड़ाई निर्धारित करें।

— माइटपॉर्क

table-layout:fixed;इसका समाधान है

— एमएम

Answer 1

मैं इसके साथ थोड़ा खेलता था क्योंकि मुझे इसका पता लगाने में परेशानी होती थी।

आप सेल चौड़ाई निर्धारित करने की आवश्यकता है (या तो thया tdकाम किया, मैं दोनों सेट) और सेट table-layoutकरने के लिए fixed। किसी कारण से, सेल की चौड़ाई केवल निश्चित रहने लगती है यदि टेबल की चौड़ाई निर्धारित की जाती है, तो भी (मुझे लगता है कि यह मूर्खतापूर्ण है, लेकिन क्या है)।

साथ ही, किसी अतिरिक्त पाठ को तालिका से बाहर आने से रोकने के लिए overflowगुण सेट करना उपयोगी है hidden।

आपको सीएसएस के लिए सीमा और नौकरशाही का आकार घटाने के लिए भी सुनिश्चित करना चाहिए।

ठीक है तो यहाँ मेरे पास क्या है:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

यहाँ यह JSFiddle में है

इस आदमी को एक समान समस्या थी: टेबल सेल चौड़ाई - फिक्सिंग चौड़ाई, रैपिंग / ट्रंकिंग लंबे शब्द

Comments

इसे नोटिस करना महत्वपूर्ण है: "ब्राउज़र तब तालिका की पहली पंक्ति में कोशिकाओं की चौड़ाई के आधार पर कॉलम की चौड़ाई निर्धारित करेगा", stackoverflow.com/questions/570154/…

— daniloquio

यह तब काम करता है जब टेबल की चौड़ाई तय नहीं होती है। jsfiddle.net/lavinski/CGCFW/3 आपको शेष स्थान लेने के लिए एक गतिशील पंक्ति की आवश्यकता है।

— डैनियल लिटिल

@DanielLittle वैकल्पिक रूप से आप तालिका की चौड़ाई 1px पर सेट कर सकते हैं; overflow: visibleडायनामिक साइज़ की टेबल के साथ , जब तक कि सेल्स का आकार तय नहीं हो जाता और ओवरफ्लो दिखाई देता है, तब तक कोई फर्क नहीं पड़ता कि टेबल का आकार वास्तविक सेल्स से बड़ा या छोटा है।

— महन

यदि आपकी td में "चौड़ाई = 30% है?" तो आप क्या कर सकते हैं?

— 71GA

कृपया ओवरफ्लो जोड़ें: छिपा हुआ @ RokoC.Buljan

— एलेक्स ग्रांडे

Answer 2

देखें: http://www.html5-tutorials.org/tables/changing-column-width/

तालिका टैग के बाद, कॉल तत्व का उपयोग करें। आपको समापन टैग की आवश्यकता नहीं है।

उदाहरण के लिए, यदि आपके पास तीन कॉलम हैं:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

Comments

इस! यह एचटीएमएल 5 का जवाब है और यह बेवकूफ हुप्स के माध्यम से कूदने के लिए मेरे बिना काम करता है। इसके अलावा आप सीएसएस में अपनी चौड़ाई रखने के लिए और शैली जानकारी के लिए अपने HTML को प्रदूषित नहीं करने के बजाय <col class = "someClassName"> का उपयोग कर सकते हैं।

— जॉन मुन्सच

@Sam आपके पास कुछ अन्य समस्या हो सकती है जैसे कि CSS, इनलाइन शैली, या गलत सिद्धांत आदि को ओवरराइड करना। यह निश्चित रूप से काम करता है, कॉलम शैली सेट करने का मानक तरीका।

— समीर अलीभाई

मुझे यकीन नहीं है कि यह 'एचटीएमएल 5 रास्ता' है। ऐसा प्रतीत होता है कि HTML5 में कॉलग्रुप / कॉल केवल स्पैन को चिह्नित करने के लिए उपयोग किया जाता है। एमडीएन कॉल टैग्स पर शैली विशेषता के उपयोग का कोई उल्लेख नहीं करता है (इसके अलावा यह वैश्विक विशेषताओं से विरासत में मिला है) और केवल bgcolor का कहना है: "... प्रासंगिक <td> तत्वों पर CSS संपत्ति ... का उपयोग करें।" developer.mozilla.org/en-US/docs/Web/HTML/Element/col ।

— स्टीफन पैंजर

मेरे लिए टेबल स्टाइल से काम किया table-layout: fixed; width: 100%;। धन्यवाद!

— नागर

यह अंत-सभी / निश्चित नहीं है, लेकिन w3schools भी इसके लिए उपयोग का उल्लेख नहीं करता है col। यह सुझाता है कि <td>(या a <th) पर लागू css का उपयोग कैसे किया जाता है - w3schools.com/tags/att_td_width.asp

— डॉन चेडल

Answer 3

बस <div>अंदर टैग जोड़ें <td>या <th>चौड़ाई को परिभाषित करें <div>। इससे आपको मदद मिलेगी। और कुछ काम नहीं करता।

जैसे।

<td><div style="width: 50px" >...............</div></td>

Comments

मैंने इस समाधान को उसी पिक्सेल चौड़ाई के लिए न्यूनतम-चौड़ाई / अधिकतम-चौड़ाई निर्दिष्ट करने के साथ जोड़ा, जो सुरक्षित पक्ष पर होना चाहिए। अंत में यह काम कर रहा है। मुझे नहीं पता कि मुझे इन सभी अतिरिक्त राउंड को क्यों चलाना है, यह वास्तव में निश्चित रूप से निश्चित है, हास्यास्पद है ...

— सेसाबा टोथ

इस बात पर ध्यान न देने से बेहतर है कि उसी सीएसएस style="width: 50px"को सेट करने से बेहतर है<td>

— डॉन चेडल

@mmcrae यह बेहतर है क्योंकि यह काम करता है, पर चौड़ाई निर्धारित <td>नहीं करता है।

— मैडब्रीक्स

Answer 4

यदि आपको अन्य स्तंभों का आकार बदलना चाहिए, तो आपको एक और अधिक निश्चित-चौड़ाई वाले स्तंभों की आवश्यकता है, दोनों को min-widthऔर max-widthएक ही मान पर सेट करने का प्रयास करें ।

Comments

मेरे लिए यह तब काम आया जब चौड़ाई को स्पष्ट रूप से सेट table-layout: fixed;नहीं किया गया था।

— जॉर्डन मैक

पवित्र शिट! अन्य समाधानों में से किसी ने भी काम नहीं किया था या वे बहुत ही भद्दे थे! यह पूरी तरह से काम किया! कोई div भी आवश्यक है!

— नीलरॉय

Answer 5

आपको इसे संबंधित CSS के अंदर लिखना होगा

table-layout:fixed;

Comments

डिव टैग्स के साथ बेहतर सॉरेन्स्टेड टेबल तो अंदर डिव

— यूज़

मेरे लिए तब काम किया जब मैंने इसे कॉलम समूहों के साथ जोड़ा: <टेबल स्टाइल = "टेबल-लेआउट: फिक्स्ड"> <कोलग्रुप> <कोल स्टाइल = "चौड़ाई: 50%"> <कोल स्टाइल = "चौड़ाई: 50%"> </ colgroup> <tbody> ... </ tbody> </ तालिका>।

— रस बेटमैन

इससे कार्तिक Coyer लेख यह अच्छी तरह से बताते हैं: css-tricks.com/fixing-tables-long-strings

— cssyphus

Answer 6

मैं क्या कर रहा हूँ:

1. Td चौड़ाई सेट करें:

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>

2. CSS के साथ td चौड़ाई सेट करें:

   <td style="width:200px; height:50px;">

3. सीएसएस के साथ अधिकतम और न्यूनतम के रूप में फिर से चौड़ाई सेट करें:

   <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">

यह थोड़ा दोहराव लगता है लेकिन यह मुझे वांछित परिणाम देता है। इसे बहुत आसानी से प्राप्त करने के लिए, आपको अपनी स्टाइल-शीट में सीएसएस मूल्यों को एक कक्षा में रखने की आवश्यकता हो सकती है:

.td_size {    
  width:200px; 
  height:50px;
  max-width:200px;
  min-width:200px; 
  max-height:50px; 
  min-height:50px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

फिर:

<td class="td_size">

कक्षा की विशेषता को अपने <td>इच्छित स्थान पर रखें ।

Comments

यह एकमात्र समाधान था जो अतिरिक्त, संभावित-अवांछित प्रतिबंध लगाए बिना सभी मामलों में काम करता था।

— सैम

Answer 7

मैंने इसका इस्तेमाल किया

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}

Comments

Ntch- बच्चे (2) (या 3, 4

तालिका td nth-child (n + 1) {...} में सभी कॉलम होंगे लेकिन पहला कॉलम

— एड रान्डल

Answer 8

यदि आप एक निश्चित लेआउट नहीं चाहते हैं, तो कॉलम के लिए उचित रूप से आकार के लिए एक वर्ग निर्दिष्ट करें।

सीएसएस:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>

Answer 9

यह अंतिम "फिलर सेल" में डालने में भी मदद करता है, चौड़ाई के साथ : ऑटो । यह शेष स्थान पर कब्जा कर लेगा, और अन्य सभी आयामों को निर्दिष्ट के रूप में छोड़ देगा।

Answer 10

निर्धारित चौड़ाई से कम होने पर छोटे स्क्रीन के लिए स्वीकृत उत्तर दें।

HTML:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

सीएसएस

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

जेएस फिडल

https://jsfiddle.net/w9s3ebzt/

Answer 11

इसे सेट करना:

style="min-width:100px;" 

मेरे लिए काम किया।

Answer 12

केसुन को सही विचार है। यहाँ सही कोड है ...

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>

Answer 13

यहां मेरे उत्तर के अनुसार , टेबल हेड (जो खाली हो सकता है) का उपयोग करना और प्रत्येक टेबल हेड सेल के लिए सापेक्ष चौड़ाई लागू करना भी संभव है । टेबल बॉडी की सभी कोशिकाओं की चौड़ाई उनके कॉलम हेड की चौड़ाई के अनुरूप होगी। उदाहरण:

एचटीएमएल

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

सीएसएस

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

परिणाम देख

वैकल्पिक रूप से, colgroupहैथिन के उत्तर में सुझाए अनुसार उपयोग करें ।

Answer 14

मैं सेल में एक तत्व के बाद का उपयोग करता हूं, जहां मैं पाठ की परवाह किए बिना एक न्यूनतम चौड़ाई सेट करना चाहता हूं, जैसे:

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

मुझे टेबल पैरेंट पर न तो चौड़ाई निर्धारित करनी है और न ही टेबल-लेआउट का उपयोग करना है।

Answer 15

मैंने पाया Kasun के जवाब का उपयोग कर बेहतर काम करता है VW के बजाय पिक्सल इसलिए की तरह:

<td><div style="width: 10vw" >...............</div></td>

यह एकमात्र स्टाइल था जिसे मुझे कॉलम की चौड़ाई को समायोजित करने की आवश्यकता थी

Answer 16

आपको सेट करने की आवश्यकता नहीं है "fixed"- overflow:hiddenकॉलम चौड़ाई निर्धारित होने के बाद आपको सभी की आवश्यकता है ।

Comments

जो सेल सीमाओं के पीछे की सामग्री को छिपाएगा, एक अच्छा विचार नहीं।

— रहस्यदत्त