टेबल सेल चौड़ाई बूटस्ट्रैप

Question

साथ मैं दो स्तंभों के साथ एक सरल मेज है, मैं उदाहरण के बाएँ स्तंभ 30% अधिकार स्तम्भ 70% के लिए इन स्तंभों में से प्रत्येक की चौड़ाई सेट करना चाहते हैं। आखिरकार मैं पंक्तियों के सैकड़ों होगा तो अगर मैं एक वैश्विक सीएसएस वर्ग मुझे लगता है कि सबसे अच्छा होगा लागू कर सकते हैं?

वर्तमान में बाएँ स्तंभ संकुचित है और अच्छी नहीं लगती है।

यदि कोई व्यक्ति कुछ सहायता दे सकता है तो मैंने jsfiddle बनाया है।

<div class="container"> 
    <div class="row col-md-8"> 
     <table class="table table-striped"> 
      <tr> 
       <td>row name here</td> 
       <td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer eget</td> 
      </tr> 
      <tr> 
       <td>another row name here</td> 
       <td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egetsdsdfsdf fsdfsdf</td>></tr> 
     </table> 
    </div> 
</div> 

Answer 1

यहाँ पर मेरी ले है यह। मैं आसान पहुँच के लिए मेज पर एक आईडी जोड़ दिया है।

मार्कअप

<div class="container"> 
    <div class="row col-md-8"> 
     <table class="table table-striped" id="someid"> 
      <tr> 
       <td>row name here</td> 
       <td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer eget</td> 
      </tr> 
      <tr> 
       <td>another row name here</td> 
       <td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egetsdsdfsdf fsdfsdf</td>></tr> 
     </table> 
    </div> 
</div> 

सीएसएस

#someid tr td:nth-child(1){ 
    width:30%; 
} 

Fiddle

Answer 2

जब मैं पहली बार tr की td पर width संपत्ति के साथ की कोशिश की यह मेरे

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
     <div class="row col-md-8"> 
 
      <table class="table table-striped"> 
 
       <tr> 
 
        <td width="30%">row name here</td> 
 
        <td width="70%">sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer eget</td> 
 
       </tr> 
 
       <tr> 
 
        <td>another row name here</td> 
 
        <td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egetsdsdfsdf fsdfsdf</td></tr> 
 
      </table> 
 
     </div> 
 
    </div>

नवीनतम अद्यतन के अनुसार, td में चौड़ाई विशेषता अब समर्थित नहीं होगा के लिए ठीक काम करता है, ताकि आप सीएसएस के माध्यम से चौड़ाई निर्धारित करना चाहिए।

#someid tr td{ 
    width:30%; 
} 

psudo कोड का उपयोग:

#someid tr td:nth-child(1){ 
    width:30%; 
} 

क्या मुद्दा आप का सामना करना पड़ा?

Answer 3

के लिए एक न्यूनतम-चौड़ाई संपत्ति को परिभाषित करें अपने वर्ग nowrap साथ है, तो जैसे:

td.nowrap { 
    min-width: 129px; 
} 

Updated अपने fiddle

Answer 4

सीएसएस:

table.table.table-striped tr > td:first-child {width:30%;}

Answer 5

आप सीएसएस संपत्ति table-layout: fixed उपयोग कर सकते हैं इस कॉलम पर दिए गए चौड़ाई के लिए बाध्य करेगा:

table { 
    table-layout: fixed; 
} 

td:first-child { 
    width: 30%; 
} 
td:last-child { 
    width: 70%; 
} 

Updated fiddle

आम तौर पर आप स्तंभ की प्रत्येक कोशिका में एक ही चौड़ाई देना होगा लेकिन table-layout: fixed साथ आप केवल कॉलम के हेडर सेल पर सेट कर सकते हैं:

<thead> 
    <tr> 
     <th class="first">Column A</th> 
     <th class="second">Column B</th> 
    </tr> 
</thead> 

रूप this fiddle

में दिखाया गया है

Answer 6

<style> 

td{ 
    max-width: 100px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    word-wrap: break-word; 
} 

#someid tr td:nth-child(1){ 
    width:10%; 
} 

</style> 



add id "somdeid" in table 

<table id="someid"> 
<tbody> 
<tr> 
<td>some text here</td> 
<td>some long text here</td> 
</tr> 
</tbody> 
</table>