किनारे के खिलाफ ट्विटर बूटस्ट्रैप तालिका का सबसे अधिक कॉलम फ्लश करें

मैं स्कूल के लिए प्रोजेक्ट वेबसाइट तैयार करने के लिए ट्विटर-बूटस्ट्रैप (3.0) का उपयोग कर रहा हूं, हम एक ऑनलाइन जोखिम क्लोन बना रहे हैं, जिसमें स्वतंत्रतापूर्ण मोड़ जैसे शब्दों के साथ शब्द हैं। मैं वर्तमान खेलों की प्लेयर की सूची को प्रदर्शित करने के लिए एक HTML तालिका का उपयोग करता हूं और मैं इसे बनाना चाहता हूं ताकि दाएं के खिलाफ दाएं सबसे अधिक कॉलम फ्लश हो और इसमें बहुत अधिक अतिरिक्त सफेद स्थान न हो।

यहाँ मेरी डमी टेबल है:

<table class = "table table-hover">
    <thead>
        <tr>
            <th> Game ID </th>
            <th> Status </th>
            <th> Players </th>
            <th> Turn </th>
            <th> Last Turn </th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td> 1 </td>
           <td> IN PROGRESS </td>
           <td> 4/4 </td>
           <td> tedbeem </td>
           <td> 11/12/13 6:30 PM </td>
           <td> <button class = "btn btn-primary"> View </button> </td>
       </tr>
       <tr>
           <td> 2 </td>
           <td> RECRUITING </td>
           <td> 4/5 </td>
           <td> N/A </td>
           <td> 11/12/13 3:10 PM </td>
           <td> <button class = "btn btn-primary"> View </button> </td>
       </tr>
       <tr>
           <td> 13 </td>
           <td> IN PROGRESS </td>
           <td> 3/3 </td>
           <td> D-Halt-on </td>
           <td> 11/12/13 9:00 AM </td>
           <td> <button class = "btn btn-primary"> View </button> </td>
       </tr>
    </tbody>
</table>

An example of what I want it to look like can be found here: http://bootsnipp.com/snippets/featured/table-with-users

उन्होंने जो किया वह अंतिम तत्व को एक निश्चित चौड़ाई देता है और किसी भी तरह से यह काम करता है। क्या कोई इसे समझा सकता है या मेरा बेहतर समाधान दे सकता है?

4

3 उत्तर

समस्या यह है कि अंतिम स्तंभ (जो दाएं गठबंधन है) इसके अंदर के बटन से अधिक स्थान लेता है (जो left है गठबंधन) जरूरत है।

column

इसे ठीक करने के लिए, आप निम्न में से कोई एक कर सकते हैं:

  1. Shrink the column to take up a smaller amount of space, so the button appears to hug the right*:

    table tr td:last-child {
        white-space: nowrap;
        width: 1px;
    }
    
  2. Right align the content of the last row so the button aligns to the right size of all the space it is allotted.

    table tr td:last-child {
        text-align: right;
    }
    

*Note: The sample went with the first option by applying an inline style to the last header, effectively setting the width for the whole column with <th style="width: 36px;"></th>

jsFiddle में वर्किंग डेमो

जो इस तरह दिखेगा:

demo

10
जोड़ा

बूटस्ट्रैप ढांचे का उपयोग करके, आप बस टेक्स्ट-दाएं कक्षा को अंतिम टीडी सेल में जोड़ सकते हैं। http://getbootstrap.com/css/#type-emphasis (संरेखण कक्षाओं तक नीचे स्क्रॉल करें)

If you want to make your buttons smaller, look into the button sizing classes: btn-sm or btn-xs http://getbootstrap.com/css/#buttons-sizes

9
जोड़ा
अतिरिक्त शैलियों के बिना अच्छा और साफ :)
जोड़ा लेखक kovpack, स्रोत

यह सिर्फ टेबल कैसे काम करता है, मैं यह क्या करूँगा यह है:

अपनी तालिका एक आईडी दें

<table id="my_table">

Specify this:

#my_table tbody tr td:last-child {
    white-space: nowrap;
    width: 1%
}

Basically compress the last column as much as you can but do not wrap anything.

4
जोड़ा