सामग्री बूट करने के लिए बूटस्ट्रैप तालिका कॉलम बनाना

Question

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<table class="table table-responsive"> 
 
     <tbody> 
 
      <tr> 
 
       <th>Name</th> 
 
       <th>Payment Method</th> 
 
       <th></th> 
 
      </tr> 
 
      <tr> 
 
       <td>Bart Foo</td> 
 
       <td>Visa</td> 
 
       <td><a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a></td> 
 
      </tr> 
 
     </tbody> 
 
    </table>

यह इस तरह प्रस्तुत करता है:

कुछ फ़ायरबग पर प्रकाश डाला साथ

, स्तंभ चौड़ाई इस विस्तृत बाहर आ गया है:

पृष्ठ के साथ उस कॉलम स्केल, जबकि पृष्ठ बड़े गतिशील चौड़ाई मोड में है। मुझे कुछ पता है कि मैं शुद्ध सीएसएस में इसे ठीक करने के बारे में कैसे जाऊंगा, लेकिन उनमें से अधिकतर दृष्टिकोण साइट के निम्न चौड़ाई संस्करणों के साथ समस्याएं पैदा करेंगे।

मैं उस कॉलम को अपनी सामग्री की चौड़ाई तक कैसे छोड़ दूंगा?

(कभी के रूप में - मौजूदा बूटस्ट्रैप कक्षाएं> शुद्ध सीएसएस> जावास्क्रिप्ट)

Answer 1

एक वर्ग है कि सामग्री के लिए तालिका सेल चौड़ाई

.table td.fit, 
.table th.fit { 
    white-space: nowrap; 
    width: 1%; 
} 

Answer 2

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

.table-fit { 
    width: 1px; 
} 

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

<table class="table table-fit"> 

उदाहरण: JSFiddle

Answer 3

आप इसे के रूप में इस तरह div टैग के आसपास अपनी मेज लपेट कर सकते हैं मुझे भी मदद की

<div class="col-md-3"> 

<table> 
</table> 

</div>