बूटस्ट्रैप तालिका स्तंभ को सामग्री के अनुरूप बनाना

Question 1

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

<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>

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

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

तालिका उदाहरण

कुछ फायरबग हाइलाइटिंग के साथ, कॉलम की चौड़ाई इस विस्तृत रूप से सामने आई है:

स्तंभ की चौड़ाई

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

मैं उस कॉलम को उसकी सामग्री की चौड़ाई तक कैसे गिराऊंगा?

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

Question 2

एक ऐसी कक्षा बनाएं जो सामग्री के लिए तालिका सेल चौड़ाई फिट होगी

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

Question 3

बूटस्ट्रैप 4.5 और 5.0 पर परीक्षण किया गया

मेरे लिए कोई भी समाधान काम नहीं करता है। tdअंतिम स्तंभ अभी भी पूरी चौड़ाई लेता है। तो यहाँ समाधान काम करता है।

table-fitअपने में जोड़ेंtable

table.table-fit {
    width: auto !important;
    table-layout: auto !important;
}
table.table-fit thead th, table.table-fit tfoot th {
    width: auto !important;
}
table.table-fit tbody td, table.table-fit tfoot td {
    width: auto !important;
}

यहाँ sassउपयोग के लिए एक है ।

@mixin width {
    width: auto !important;
}

table {
    &.table-fit {
        @include width;
        table-layout: auto !important;
        thead th, tfoot th  {
            @include width;
        }
        tbody td, tfoot td {
            @include width;
        }
    }
}

Question 4

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

.table-fit {
    width: 1px;
}

और इसका उपयोग ऐसे करें:

<table class="table table-fit">

उदाहरण: JSFiddle

Question 5

जोड़े डब्ल्यू-ऑटो देशी बूटस्ट्रैप 4 वर्ग के लिए तालिका तत्व और अपनी मेज अपनी सामग्री फिट होगा।

Question 6

यह समाधान हर बार अच्छा नहीं होता है। लेकिन मेरे पास केवल दो कॉलम हैं और मैं शेष सभी स्थान लेने के लिए दूसरा कॉलम चाहता हूं। इसने मेरे लिए काम किया

 <tr>
    <td class="text-nowrap">A</td>
    <td class="w-100">B</td>
 </tr>

Question 7

आप अपनी तालिका को div टैग के चारों ओर इस तरह लपेट सकते हैं जैसे उसने मेरी भी मदद की हो।

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

<table>
</table>

</div>

Question 8

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<h5>Left</h5>
<table class="table table-responsive">
    <tbody>
        <tr>
            <th>Action</th>        
            <th>Name</th>
            <th>Payment Method</th>
        </tr>
        <tr>
            <td  style="width:1px; white-space:nowrap;">
                <a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a>
                <a role="button" class="btn btn-primary btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Edit</a>
                <a role="button" class="btn btn-danger btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Delete</a>                
            </td>        
            <td>Bart Foo</td>
            <td>Visa</td>
        </tr>
    </tbody>
</table>

<h5>Right</h5>

<table class="table table-responsive">
    <tbody>
        <tr>                    
            <th>Name</th>
            <th>Payment Method</th>
            <th>Action</th>            
        </tr>
        <tr>

            <td>Bart Foo</td>
            <td>Visa</td>
            <td  style="width:1px; white-space:nowrap;">
                <a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a>
                <a role="button" class="btn btn-primary btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Edit</a>
                <a role="button" class="btn btn-danger btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Delete</a>                
            </td>            
        </tr>
    </tbody>
</table>

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