513

सरल योजना:

  <tr class="something">
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>

मुझे इसके लिए एक निश्चित चौड़ाई निर्धारित करने की आवश्यकता है <td>। मैंने कोशिश की:

tr.something {
  td {
    width: 90px;
  }
}

भी

td.something {
  width: 90px;
}

के लिये

<td class="something">B</td>

और भी

<td style="width: 90px;">B</td>

लेकिन <td>अभी भी इसकी चौड़ाई समान है।

— user984621
स्रोत

1

मैंने बस कोशिश की और यह काम करता है - शायद समस्या कहीं अलग है। फायरबग आपको तत्व के बारे में क्या बताता है?

— रॉकबोट

इस साइट में , आदमी वीडियो के साथ इस विषय के बारे में बता रहा है। यह इतना स्पष्ट है।

— एग्जामिनर्स

style="width: 1% !important;"कॉलम में सबसे लंबे शब्द के रूप में चौड़ाई को तंग करने के लिए उपयोग करें, यह पहली आईडी / # कॉलम के लिए उपयोगी है। क्रोम (डेस्कटॉप और मोबाइल), ओपेरा (डेस्कटॉप), IE (डेस्कटॉप), एज (डेस्कटॉप), फ़ायरफ़ॉक्स (डेस्कटॉप) में

— परीक्षण किया गया

1084

बूटस्ट्रैप 4.0 के लिए:

बूटस्ट्रैप 4.0.0 में आप col-*मज़बूती से कक्षाओं का उपयोग नहीं कर सकते हैं (फ़ायरफ़ॉक्स में काम करता है, लेकिन क्रोम में नहीं)। आपको OhadR के उत्तर का उपयोग करने की आवश्यकता है :

<tr>
  <th style="width: 16.66%">Col 1</th>
  <th style="width: 25%">Col 2</th>
  <th style="width: 50%">Col 4</th>
  <th style="width:  8.33%">Col 5</th>
</tr>

बूटस्ट्रैप 3.0 के लिए:

ट्विटर बूटस्ट्रैप 3 उपयोग के साथ: class="col-md-*"जहां * चौड़ाई के कई कॉलम हैं।

<tr class="something">
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

बूटस्ट्रैप 2.0 के लिए:

ट्विटर बूटस्ट्रैप 2 उपयोग के साथ: class="span*"जहां * चौड़ाई के स्तंभों की संख्या है।

<tr class="something">
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

** यदि आपके पास <th>तत्व हैं, तो वहां चौड़ाई निर्धारित करें और <td>तत्वों पर नहीं ।

— पाउलो
स्रोत

79

यदि आपके पास 12 से अधिक कॉलम हैं, तो क्या होगा?

— ClearCloud8

33

आप इसे केवल <head> में प्रत्येक <th> टैग में लागू कर सकते हैं और सभी पंक्तियाँ मेल खाएंगी

— डिएगो फर्नांडो मुरिलो वेलेंसी

7

क्या बूटस्ट्रैप वेबसाइट पर इसके बारे में कोई दस्तावेज है?

— लुइस पेरेज़

26

यह काम करता है, लेकिन यह बूटस्ट्रैप साइट पर नहीं है क्योंकि उन कॉल-क्लास का उपयोग इस तरह से नहीं किया जाता है। वे उत्तरदायी बूटस्ट्रैप ग्रिड में उपयोग किए जाने के लिए हैं। यदि आपको यह पसंद है, तो उनके लिए सीएसएस को देखने पर विचार करें और इसे अपने सीएसएस बनाने के लिए कॉपी करें।

— डस्टिनए

1

इसके अलावा, कक्षा को पहुंच पंक्ति में सेट करने के बजाय, हम इसे हेडर <th> के लिए एक बार सेट कर सकते हैं और बाकी को स्वचालित रूप से ध्यान रखा जाता है!

— dopplesoldner

133

मेरे पास एक ही मुद्दा था, मैंने तालिका को निश्चित किया और फिर अपनी td चौड़ाई निर्दिष्ट की। यदि आपके पास है तो आप उन्हें भी कर सकते हैं।

table {
    table-layout: fixed;
    word-wrap: break-word;
}

टेम्पलेट:

<td style="width:10%">content</td>

कृपया किसी भी लेआउट की संरचना के लिए CSS का उपयोग करें।

— dddd
स्रोत

ज़रूर stackoverflow.com/questions/12881067/html-td-width-and-height , developer.mozilla.org/en/docs/Web/API/HTMLTableCellElement

— जॉन कोप्स

यह बहुत अच्छा है, लेकिन इसके अलावा सीधे टैग लगाने के बजाय टैग classमें एक का उपयोग करेंtd

— रामेस

1

इस तरह की चौड़ाई बढ़ाने के लिए यह सिर्फ बेहतर धन्यवाद काम करता है th:<th style="width: 25%;"></th> यह अन्य कॉलम की चौड़ाई को प्रभावित करेगा

— shaijut

धन्यवाद! मैंने बूटस्ट्रैप 3 के लिए col-md-x क्लास सेट किया है, लेकिन यह काम नहीं किया। टेबल लेआउट को "निश्चित" पर सेट करने से मेरा मुद्दा हल हो जाता है।

— मौरिसरेक्स

यह काम। कुंजी है table-layout: fixed। इसकी आवश्यकता है क्योंकि बीएस 4 के साथ निर्मित कई टेम्प्लेट तालिकाओं सहित, सब कुछ पर फ्लेक्स लागू करते हैं।

— इवान

73

पंक्ति में col-md-*प्रत्येक पर कक्षाएं लगाने के बजाय tdआप एक बना सकते हैं colgroupऔर कक्षाओं को colटैग पर लागू कर सकते हैं ।

    <table class="table table-striped">
        <colgroup>
            <col class="col-md-4">
            <col class="col-md-7">
        </colgroup>
        <tbody>
        <tr>
            <td>Title</td>
            <td>Long Value</td>
        </tr>
        </tbody>
    </table>

यहां डेमो करें

— stormwild
स्रोत

1

मैं इसे पसंद करता हूं लेकिन यह मेरे मामले को प्रभावित नहीं करता है, कॉलम की चौड़ाई col-

— md-

मुझे यह समाधान पसंद है, वैसे, क्यों किसी को कॉल-एमडी- * कक्षाओं का उपयोग करने के लिए मजबूर किया जाता है और कोल-एलजी- *, कॉल-एसएम- * या कॉल-एक्सएस- *?

— लुसियोबी

1

@LucioB आप जो चाहें उसका उपयोग कर सकते हैं और यहां तक कि उनमें से कई को कॉलम द्वारा उपयोग कर सकते हैं (उदाहरण के लिए <col class="col-md-4 col-sm-6">मध्यम स्क्रीन आकार में 33% की चौड़ाई और छोटे स्क्रीन आकार में 50% होगा)

— VDarricau

1

Chrome में Colgroup काम नहीं कर रहा है। (बूटस्ट्रैप v4.1)। ब्राउज़रों में एकरूपता के लिए, <td> तत्वों के लिए% चौड़ाई का उपयोग करें।

— अंकित

57

उम्मीद है कि यह किसी की मदद करेगा:

<table class="table">
  <thead>
    <tr>
      <th style="width: 30%">Col 1</th>
      <th style="width: 20%">Col 2</th>
      <th style="width: 10%">Col 3</th>
      <th style="width: 30%">Col 4</th>
      <th style="width: 10%">Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Val 1</td>
      <td>Val 2</td>
      <td>Val 3</td>
      <td>Val 4</td>
      <td>Val 5</td>
    </tr>
  </tbody>
</table>

https://github.com/twbs/bootstrap/issues/863

— OhadR
स्रोत

1

सबसे सरल उत्तर का उपयोग करें

— गैविनबेल्सन

54

यदि आप <table class="table">अपनी मेज पर उपयोग कर रहे हैं , तो बूटस्ट्रैप का टेबल वर्ग तालिका में 100% की चौड़ाई जोड़ता है। आपको ऑटो में चौड़ाई बदलने की आवश्यकता है।

इसके अलावा, यदि आपकी तालिका की पहली पंक्ति हेडर पंक्ति है, तो आपको td की बजाय वें से चौड़ाई जोड़ने की आवश्यकता हो सकती है।

— meobyte
स्रोत

1

बूटस्ट्रैप 3 पर एक अतिरिक्त के रूप में आपको thसामान्य से व्हाइट-स्पेस प्रॉपर्टी को सेट करना होगा क्योंकि यह वर्तमान में क्रैप है क्योंकि इस तरह के हेडर नहीं टूटेंगे।

— शामे

41

मेरे मामले में मैं कोशिकाओं के min-width: 100pxबजाय का उपयोग करके या उस मुद्दे को ठीक करने में सक्षम था ।width: 100pxthtd

.table td, .table th {
    min-width: 100px;
}

— ThiagoPXP
स्रोत

13

यह मेरी पवित्रता से बचा हुआ है।

— जोएल

हाँ! यह एक उत्तरदायी तालिका में एक कॉलम के लिए अच्छी तरह से न्यूनतम चौड़ाई सेट करता है। धन्यवाद।

— ओ। जोन्स

1

इस सवाल का जवाब से बेहतर काम किया, धन्यवाद!

— इसराएल

38

बूटस्ट्रैप 4 के लिए, आप बस क्लास हेल्पर का उपयोग कर सकते हैं:

<table class="table">
  <thead>
    <tr>
      <td class="w-25">Col 1</td>
      <td class="w-25">Col 2</td>
      <td class="w-25">Col 3</td>
      <td class="w-25">Col 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      ...

— चान
स्रोत

5

यह मेरे उपयोग के मामले के लिए फिट है। धन्यवाद!

— टन

16

यह ध्यान रखना महत्वपूर्ण है कि एकमात्र w- * विकल्प हैं: .w-25, .w-50, .w-75, .w-100, .w-autoइसलिए यदि आप कुछ और चाहते हैं, w-10तो कहें, आपको .w-10 { width: 10% !important; }अपनी स्थानीयकृत टॉस फ़ाइल में जोड़ना होगा ।

— अबेला

10

इसे इस्तेमाल करे -

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>

— रोहित सुथार
स्रोत

3

यह एकमात्र ऐसा है जो अन्य सभी उत्तरों से बाहर काम करता है।

— 0bserver07

मैंने यह भी text-overflow: ellipsisसुनिश्चित करने के लिए जोड़ा कि कट-ऑफ टेक्स्ट स्पष्ट है

— सप्ताहदेव

@ ऑब्जर्वर

— 07

9

बूटस्ट्रैप 4.0

बूटस्ट्रैप 4.0 पर, हमें क्लास डी-फ्लेक्स जोड़कर टेबल पंक्तियों को फ्लेक्स-बॉक्स घोषित करना होगा, और बूटस्ट्रैप को व्यूपोर्ट से स्वचालित रूप से प्राप्त करने की अनुमति देने के लिए xs, md, प्रत्यय को भी छोड़ना होगा।

तो यह निम्नलिखित दिखेगा:

<table class="table">
    <thead>
        <tr class="d-flex">
            <th class="col-2"> Student No. </th>
            <th class="col-7"> Description </th>
            <th class="col-3"> Amount </th>
        </tr>
    </thead>

    <tbody>
        <tr class="d-flex">
            <td class="col-2">test</td>
            <td class="col-7">Name here</td>
            <td class="col-3">Amount Here </td>
        </tr>
</table>

आशा है कि यह किसी और के लिए उपयोगी होगा!

चीयर्स!

— रंडिका विशमन
स्रोत

7

इस संयुक्त समाधान ने मेरे लिए काम किया, मुझे समान चौड़ाई के कॉलम चाहिए थे

<style type="text/css">

    table {
        table-layout: fixed;
        word-wrap: break-word;
    }

        table th, table td {
            overflow: hidden;
        }

</style>

परिणाम :-

— हितेश साहू
स्रोत

3

ठीक है, मुझे पता चला कि समस्या कहाँ थी - बूटस्ट्रैप को तत्व के widthलिए एक डिफ़ॉल्ट मान के रूप में स्थापित किया गया है select, इस प्रकार, समाधान है:

tr. something {
  td {
    select {
      width: 90px;
    }
  }
}

कुछ भी मुझे काम नहीं करता है।

— user984621
स्रोत

2

पृष्ठ html या अपने सीएसएस के संदर्भ के बिना न्याय करने के लिए मुश्किल। आपके सीएसएस नियम td तत्व को प्रभावित नहीं कर रहे हैं एक zillion कारण हो सकता है।

क्या आपने अधिक विशिष्ट CSS चयनकर्ताओं की कोशिश की है जैसे

tr.somethingontrlevel td.something {
  width: 90px;
}

यह आपके CSS को बूटस्ट्रैप css से अधिक विशिष्ट नियम द्वारा ओवरराइड होने से बचने के लिए है।

(वैसे, स्टाइल विशेषता के साथ आपके इनलाइन सीएसएस नमूने में, आपने चौड़ाई को गलत कर दिया है - जो यह समझा सकता है कि यह विफल क्यों हुआ!)

— डेविड हेजल
स्रोत

2

मैं थोड़ी देर के लिए इस मुद्दे से जूझ रहा था, इसलिए सिर्फ उस स्थिति में जब कोई मेरे जैसी ही मूर्खतापूर्ण गलती करता है ... अंदर मुझे शैली लागू <td>करने का तत्व मिला white-space:pre। इसने मेरी सभी टेबल / tr / td ट्रिक्स को खारिज कर दिया। जब मैंने उस शैली को हटा दिया, तो अचानक मेरे सभी पाठ को अच्छी तरह से अंदर प्रारूपित कर दिया गयाtd ।

इसलिए, हमेशा मुख्य कंटेनर (जैसे tableया td) की जांच करें, लेकिन हमेशा जांच लें कि क्या आप अपना ब्यूटीफुल कोड कहीं गहरा रद्द नहीं करते हैं :)

— Mikk
स्रोत

1

बूटस्ट्रैप 4 में "ट्र" के लिए पंक्ति के बजाय डी-फ्लेक्स का उपयोग करें

बात यह है कि "पंक्ति" वर्ग अधिक चौड़ाई लेता है फिर मूल कंटेनर, जो मुद्दों का परिचय देता है।

<table class="table">
  <tbody>
    <tr class="d-flex">
      <td class="col-sm-8">Hello</td>
      <td class="col-sm-4">World</td>
    </tr>
    <tr class="d-flex">
      <td class="col-sm-8">8 columns</td>
      <td class="col-sm-4">4 columns</td>
    </tr>
  </tbody>
</table>

स्निपेट का विस्तार करें

— उस्मान अनवर
स्रोत

मेरा मतलब "tr" के बजाय "row" था। जैसा कि पंक्ति वर्ग दोनों सिरों पर गटर के साथ आता है। या यदि आप "पंक्ति" वर्ग का उपयोग नहीं करना चाहते हैं तो केवल "नो-गटर" वर्ग जोड़ें।

— उस्मान अनवर

1

बूटस्टार 4 में आप उपयोग कर सकते हैं rowऔर col-*तालिका में, मैं इसे नीचे के रूप में उपयोग करता हूं

<table class="table">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 row</th>
            <th class="col-sm-4">4 row</th>
            <th class="col-sm-5">5 row</th>
        </tr>
    </thead>
    <tbody>
        <tr class="row">
            <td class="col-sm-3">some text</td>
            <td class="col-sm-4">some text</td>
            <td class="col-sm-5">some text</td>
        </tr>
    </tbody>
</table>

— लियाम
स्रोत

1

यह है कि मैं अक्सर जब मैं IE के साथ सौदा नहीं है कैसे करते हैं

    <tr>
      <th scope="col" style="width: calc(1 * 100% / 12)">#</th>
      <th scope="col" style="width: calc(4 * 100% / 12)">Website</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Username</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Password</th>
      <th scope="col" style="width: calc(1 * 100% / 12)">Action</th>
    </tr>

इस तरह आपके पास एक परिचित 12-कोल ग्रिड हो सकता है।

— vothaison
स्रोत

0

मेरे लिए इस काम में से कोई भी नहीं है, और बूटस्ट्रैप पर 12 तत्वों के लेआउट के लिए% या sm वर्ग के बराबर करने के लिए datatable पर कई कॉल हैं।

मैं डेटाटैबल्स एंगुलर 5 और बूटस्ट्रैप 4 के साथ काम कर रहा था, और टेबल में कई कॉल हैं। मेरे लिए समाधान एक विशिष्ट चौड़ाई के साथ एक तत्व THजोड़ने के लिए था DIV। उदाहरण के लिए कर्नल "व्यक्ति का नाम" और "घटना की तारीख" के लिए मुझे एक विशिष्ट चौड़ाई की आवश्यकता है, फिर एक divकोल हेडर में डाल दें , पूरी कॉल चौड़ाई फिर उस पर दी से निर्दिष्ट चौड़ाई का आकार बदल जाती है TH:

<table datatable [dtOptions]="dtOptions" *ngIf="listData" class="table table-hover table-sm table-bordered text-center display" width="100%">
    <thead class="thead-dark">
        <tr>
            <th scope="col">ID </th>
            <th scope="col">Value</th>
            <th scope="col"><div style="width: 600px;">Person Name</div></th>
            <th scope="col"><div style="width: 800px;">Event date</div></th> ...

— एक्सल ओसोरियो
स्रोत

-1

td या th के बिना .something का उपयोग करें

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <style>
    .something {
      width: 90px;
      background: red;
    }
  </style>
</head>
<body>

<div class="container">
  <h2>Fixed width column</h2>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th class="something">Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

स्निपेट का विस्तार करें

— छिपकली
स्रोत

-2

<div class="row" id="divcashgap" style="display:none">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-default" id="gvcashgapp">
                            <thead>
                                <tr>
                                    <th class="1">BranchCode</th>
                                    <th class="2"><a>TC</a></th>
                                    <th class="3">VourNo</th>
                                    <th class="4"  style="min-width:120px;">VourDate</th>
                                    <th class="5" style="min-width:120px;">RCPT Date</th>
                                    <th class="6">RCPT No</th>
                                    <th class="7"><a>PIS No</a></th>
                                    <th class="8" style="min-width:160px;">RCPT Ammount</th>
                                    <th class="9">Agging</th>
                                    <th class="10" style="min-width:160px;">DesPosition Days</th>
                                    <th class="11" style="min-width:150px;">Bank Credit Date</th>
                                    <th class="12">Comments</th>
                                    <th class="13" style="min-width:150px;">BAC Comment</th>
                                    <th class="14">BAC Ramark</th>
                                    <th class="15" style="min-width:150px;">RAC Comment</th>
                                    <th class="16">RAC Ramark</th>
                                    <th class="17" style="min-width:120px;">Update Status</th>
                                </tr>
                            </thead>
                            <tbody id="tbdCashGapp"></tbody>
                        </table>
                    </div>
                </div>
            </div>

स्निपेट का विस्तार करें

— user10861319
स्रोत

कुछ स्पष्टीकरण भी जोड़ें।

— आकाश दुबे

यह उत्तर सबसे अच्छा है। कक्षाएं अजीब, गैर-आवश्यक आईडी, कोई स्पष्टीकरण नहीं हैं।

— गोटबैटरीज़

<Td> के लिए निश्चित चौड़ाई कैसे सेट करें?

बूटस्ट्रैप 4.0 के लिए:

बूटस्ट्रैप 3.0 के लिए:

बूटस्ट्रैप 2.0 के लिए:

बूटस्ट्रैप 4.0