तालिका स्तंभ की चौड़ाई सेट करना

Question

मुझे एक साधारण तालिका मिली है जिसका उपयोग इनबॉक्स के लिए किया जाता है:

<table border="1">
        <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Date</th>
        </tr>

मैं चौड़ाई कैसे सेट करूं, इसलिए From और Date पृष्ठ की चौड़ाई का 15% है और विषय 70% है। मैं यह भी चाहता हूं कि तालिका पूरे पृष्ठ की चौड़ाई ले ले।

Answer 1

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 15%;">
    </colgroup>
    
    
    
    <!-- Put <thead>, <tbody>, and <tr>'s here! -->
    <tbody>
        <tr>
            <td style="background-color: #777">15%</td>
            <td style="background-color: #aaa">70%</td>
            <td style="background-color: #777">15%</td>
        </tr>
    </tbody>
</table>

Comments

जैसे इस घोल की सफाई। हालाँकि, कृपया कर्नल को बंद करें जैसे <col span = "1" style = "width: 15%;" /> या <col span = "1" शैली = "चौड़ाई: 15%;"> </ col>

— lsu_guy

@Isu_guy केवल आप XHTML का उपयोग करते समय <col> को बंद कर देते हैं - HTML में, <col> टैग का कोई समापन नहीं है ... अधिक जानकारी के लिए लिंक देखें । HTML5 में, <col> एक शून्य तत्व है, जिसका अर्थ है कि इसे बंद नहीं किया जाना चाहिए

— मतिजा नालिस

@Zulu के अनुसार w3schools.com/tags/att_col_width.asp "<col> चौड़ाई विशेषता एचटीएमएल 5 में समर्थित नहीं है।"

— कलस्टर

@ कैलेटर: कोड <col> का उपयोग नहीं कर रहा है width attribute; यह एक का उपयोग कर रहा है CSS *style* width, जो कि <col> चौड़ाई विशेषता को बदल दिया गया है। (कई लोगों ने वोट देने के बावजूद टिप्पणी की है !!)

— टूलमेकरसैट

span="1"1 के बाद से डिफ़ॉल्ट है सतही है।

— मैडब्रेक्स 21

Answer 2

HTML:

<table>
  <thead>
    <tr>
      <th class="from">From</th>
      <th class="subject">Subject</th>
      <th class="date">Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[from]</td>
      <td>[subject]</td>
      <td>[date]</td>
    </tr>
  </tbody>
</table>

सीएसएस:

table {
  width: 100%;
  border: 1px solid #000;
}
th.from, th.date {
  width: 15%
}
th.subject {
  width: 70%; /* Not necessary, since only 70% width remains */
}

सबसे अच्छा अभ्यास कम कोड डुप्लिकेट के लिए अपने HTML और CSS को अलग रखना है, और चिंताओं को अलग करने के लिए (संरचना और शब्दार्थ के लिए HTML, और सीएसएस प्रस्तुति के लिए)।

ध्यान दें, इसके लिए इंटरनेट एक्सप्लोरर के पुराने संस्करणों में काम करने के लिए, आपको अपनी तालिका को एक विशिष्ट चौड़ाई (जैसे, 900px) देनी पड़ सकती है। उस ब्राउज़र में प्रतिशत आयामों के साथ एक तत्व प्रदान करने में कुछ समस्याएं हैं यदि इसके आवरण में सटीक आयाम नहीं हैं।

Comments

यदि आप पहली पंक्ति में जुकाम रखते हैं तो यह समाधान विफल हो जाता है

— mark1234

अच्छा है क्योंकि <col चौड़ाई = ""> HTML5 में अप्रचलित है: developer.mozilla.org/en/docs/Web/HTML/Element/col

— रिचर्ड

Answer 3

नीचे दिए गए सीएसएस का उपयोग करें, पहली घोषणा आपके टेबल को आपके द्वारा प्रदान की जाने वाली चौड़ाई से चिपकाएगी (आपको अपने HTML में कक्षाओं को जोड़ना होगा:

table{
  table-layout:fixed;
}
th.from, th.date {
  width: 15%;
}
th.subject{
  width: 70%;
}

Comments

वास्तव में आपको केवल दो कॉलम की चौड़ाई निर्दिष्ट करने की आवश्यकता है। तीसरे की गणना स्वचालित रूप से की जाएगी, इसलिए table{table-layout:fixed};.from,.date{width:15%}यह पर्याप्त है। जब तक कि कक्षाओं का उपयोग अन्य तत्वों पर भी नहीं किया जाता है, तब तक लिखना th.fromनिरर्थक है और इसे छोटा किया जा सकता है .from।

— tomasz86

Answer 4

अपनी शैलियों को CSS फ़ाइल में रखते हुए सिर्फ एक वर्ग के साथ वैकल्पिक तरीका, जो IE7 में भी काम करता है:

<table class="mytable">
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table>
<style>
    .mytable td, .mytable th { width:15%; }
    .mytable td + td, .mytable th + th { width:70%; }
    .mytable td + td + td, .mytable th + th + th { width:15%; }
</style>

हाल ही में, आप nth-child()CSS3 (IE9 +) से चयनकर्ता का उपयोग भी कर सकते हैं , जहाँ आप सिर्फ nr डालेंगे। संबंधित कॉलम में समीपस्थ चयनकर्ता के साथ उन्हें स्ट्रिंग करने के बजाय कोष्ठक में। इस तरह, उदाहरण के लिए:

<style>
    .mytable tr > *:nth-child(1) { width:15%; }
    .mytable tr > *:nth-child(2) { width:70%; }
    .mytable tr > *:nth-child(3) { width:15%; }
</style>

Comments

प्रस्तावित :nth-childसमाधान प्रदर्शन के मामले में भयानक है। इस उदाहरण में (विशेष रूप से सार्वभौमिक चयनकर्ता के साथ) इसका उपयोग करने का कोई वैध कारण नहीं है, जहां स्टाइल के लिए केवल तीन तत्व ( thया col) हैं। इसके अतिरिक्त, आपको केवल thपहली पंक्ति में चौड़ाई निर्धारित करने की आवश्यकता है । .mytable tdपहले उदाहरण में अनावश्यक है।

— tomasz86

"प्रस्तावित: nth-child solution प्रदर्शन के मामले में भयानक है।" - प्रशस्ति पत्र की जरूरत।

— डैनमैन

यह पर्याप्त होना चाहिए: कुशल रूप से रेंडरिंग सीएसएस । सार्वभौमिक चयनकर्ता के आपके उपयोग के साथ ब्राउज़र पहले सभी तत्वों की जांच करेगा कि क्या वे दूसरे तत्व के nth बच्चे हैं, फिर यदि उनका सीधा माता-पिता है trऔर फिर वे संबंधित हैं या नहीं .mytable। यदि आप वास्तव में "nth" का उपयोग करना चाहते हैं, तो ऐसा कुछ संभवत: बहुत बेहतर होगा .mytable th:nth-of-type(1) {width: 15%}; .mytable th:nth-of-type(2) {width: 70%};:। इस मामले में तीसरे कॉलम की चौड़ाई निर्दिष्ट करने की भी आवश्यकता नहीं है।

— tomasz86

व्यक्तिगत रूप से मैं कक्षाओं या बस का उपयोग करेगा .mytable th+th{width: 70%}.mytable th+th+th{width:15%}। "एनटीटी" चयनकर्ता स्वयं बहुत उपयोगी हो सकते हैं लेकिन इस विशेष मामले में (केवल 3 स्तंभों वाली एक छोटी तालिका) वास्तव में आवश्यक नहीं है। जब table-layout: fixedआप उपयोग कर सकते हैं तो यह भी कर सकते हैं table{table-layout:fixed}th:first-child+th{width:70%}:।

— tomasz86

मुझे यह बात पता है। लेकिन वे लेख वर्षों पहले से हैं, और आज बड़ी समस्याएं हैं कि CSS चयनकर्ता, बड़ी मात्रा में चित्र और JS कोड।

— डैनमैन

Answer 5

ये मेरे दो सुझाव हैं।

1. कक्षाओं का उपयोग करना। दो अन्य स्तंभों की चौड़ाई निर्दिष्ट करने की आवश्यकता नहीं है क्योंकि वे ब्राउज़र द्वारा स्वचालित रूप से प्रत्येक में 15% पर सेट किए जाएंगे।

       table { table-layout: fixed; }
       .subject { width: 70%; }

       <table>
         <tr>
           <th>From</th>
           <th class="subject">Subject</th>
           <th>Date</th>
         </tr>
       </table>

2. कक्षाओं का उपयोग किए बिना। तीन अलग-अलग तरीके लेकिन परिणाम समान है।

   ए)

       table { table-layout: fixed; }
       th+th { width: 70%; }
       th+th+th { width: 15%; }

       <table>
         <tr>
           <th>From</th>
           <th>Subject</th>
           <th>Date</th>
         </tr>
       </table>

   ख)

       table { table-layout: fixed; }
       th:nth-of-type(2) { width: 70%; }

       <table>
         <tr>
           <th>From</th>
           <th>Subject</th>
           <th>Date</th>
         </tr>
       </table>

   ग) यह मेरा पसंदीदा है। बी के समान) लेकिन बेहतर ब्राउज़र समर्थन के साथ।

       table { table-layout: fixed; }
       th:first-child+th { width: 70%; }

       <table>
         <tr>
           <th>From</th>
           <th>Subject</th>
           <th>Date</th>
         </tr>
       </table>

Answer 6

आपके शरीर पर निर्भर करता है (या div जो आपकी टेबल को लपेट रहा है) 'सेटिंग्स' आपको ऐसा करने में सक्षम होना चाहिए:

body {
  width: 98%;
}

table {
  width: 100%;
}


th {
  border: 1px solid black;
}


th.From, th.Date {
  width: 15%;
}

th.Date {
  width: 70%;
}


<table>
  <thead>
    <tr>
      <th class="From">From</th>
      <th class="Subject">Subject</th>
      <th class="Date">Date</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>Me</td>
       <td>Your question</td>
       <td>5/30/2009 2:41:40 AM UTC</td>
     </tr>
   </tbody>
</table>

डेमो

Answer 7

    table { table-layout: fixed; }
    .subject { width: 70%; }

    <table>
      <tr>
        <th>From</th>
        <th class="subject">Subject</th>
        <th>Date</th>
      </tr>
    </table>

Answer 8

<table>
  <col width="130">
  <col width="80">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

डेमो

Comments

HTML5 में col चौड़ाई का समर्थन समर्थित नहीं है।

— रूण

Answer 9

इसके बजाय यह प्रयास करें।

<table style="width: 100%">
    <tr>
        <th style="width: 20%">
           column 1
        </th>
        <th style="width: 40%">
           column 2
        </th>
        <th style="width: 40%">
           column 3
        </th>
    </tr>
    <tr>
        <td style="width: 20%">
           value 1
        </td>
        <td style="width: 40%">
           value 2
        </td>
        <td style="width: 40%">
           value 3
        </td>
    </tr>
</table>

Answer 10

सीमा विशेषता का उपयोग न करें, अपनी सभी स्टाइलिंग आवश्यकताओं के लिए CSS का उपयोग करें।

<table style="border:1px; width:100%;">
    <tr>
            <th style="width:15%;">From</th>
            <th style="width:70%;">Subject</th>
            <th style="width:15%;">Date</th>
    </tr>
... rest of the table code...
</table>

लेकिन सीएसएस को एम्बेड करना खराब अभ्यास है - इसके बजाय सीएसएस कक्षाओं का उपयोग करना चाहिए, और सीएसएस नियमों को एक बाहरी सीएसएस फ़ाइल में डाल देना चाहिए।

Comments

मुझे संदेह होगा कि पोस्ट किए गए उदाहरण का कोड ओपी और सहायक स्टैकओवरफ़्लूएंट की योग्यता और सादगी के लिए था, इनलाइन शैलियों के लिए कोई प्रोत्साहन नहीं।

— Tass

Answer 11

यह सीएसएस में ऐसा करने का एक और न्यूनतम तरीका है जो पुराने ब्राउज़रों में भी काम करता है जो समर्थन नहीं करते हैं :nth-childऔर जैसे चयनकर्ता: http://jsfiddle.net/3wZWt/ ।

HTML:

<table>
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
    <tr>
        <td>Dmitriy</td>
        <td>Learning CSS</td>
        <td>7/5/2014</td>
    </tr>
</table>

सीएसएस:

table {
    border-collapse: collapse;
    width: 100%;
}

tr > * {
    border: 1px solid #000;
}

tr > th + th {
    width: 70%;
}

tr > th + th + th {
    width: 15%;
}

Answer 12

अपनी तालिका टैग के बाद कोलग्रुप जोड़ें। यहां चौड़ाई और स्तंभ की संख्या निर्धारित करें। और tbody टैग जोड़ें। अपने ट्रे को tbody के अंदर रखें।

<table>
    <colgroup>
       <col span="1" style="width: 30%;">
       <col span="1" style="width: 70%;">
    </colgroup>


    <tbody>
        <tr>
            <td>First column</td>
            <td>Second column</td>
        </tr>
    </tbody>
</table>

Answer 13

style="column-width:300px;white-space: normal;"

Comments

हाय - ढेर अतिप्रवाह में आपका स्वागत है। सामान्य तौर पर, पाठ के साथ उत्तर (केवल कोड के बजाय) और कुछ स्पष्टीकरण केवल कोड-केवल उत्तर से बेहतर होते हैं। चूँकि यह प्रश्न अधिक पुराना है और उसके पास बहुत से अन्य उत्तर हैं, इसलिए वे भविष्य के उत्तरों में आपका मार्गदर्शन कर सकते हैं।

— जवाहरन