2012-01-16 26 views
68

में पंक्ति रेखाएं निकालें मैं कुछ वेब ऐप के लिए ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं, मुझे ऐसा करने के लिए मजबूर किया गया है (मैं एक वेब डेवलपर नहीं हूं) और मुझे टेबल के लिए पंक्ति पंक्तियों को अक्षम करने का कोई तरीका नहीं मिल रहा है।ट्विटर बूटस्ट्रैप

जैसा कि आप Bootstrap documentation से देख सकते हैं, डिफ़ॉल्ट तालिका शैली में पंक्ति पंक्तियां होती हैं।

सादर,

+1

की कोशिश की है कि कुछ भी है कि स्पष्ट हो जाएगा नहीं मिल रहा है पर मेरे जाने देख सकते हैं, तत्वों में से कोई भी किसी भी सीएसएस वर्ग का उपयोग शामिल है। – w00t

उत्तर

116

आपका मुख्य सीएसएस को यह करें: बूटस्ट्रैप के नए संस्करण के लिए

table td { 
    border-top: none !important; 
} 

उपयोग करें:

.table th, .table td { 
    border-top: none !important; 
} 
+0

मेरे लिए काम नहीं करता है। मैंने इसे एचटीएमएल/हेड/स्टाइल भाग में रखा है, लेकिन क्रोम इसे स्ट्राइक-थ्रू के साथ प्रदर्शित करता है जैसे कि इसका उपयोग नहीं किया जाता है। कोई विचार? –

+3

@MartinWickman यह उत्तर बूटस्ट्रैप के पहले संस्करण (उस समय एक बिंदु कुछ) के लिए लिखा गया था, इसलिए इस विधि को 'महत्वपूर्ण' नियम काम करने की आवश्यकता है, लेकिन आप चयनकर्ता को थोड़ा और विशिष्ट बनाकर बच सकते हैं : '.table th, .table td { सीमा-शीर्ष: कोई नहीं; } ' –

+45

वैश्विक स्तर पर इस तरह की शैलियों को ओवरराइड न करें। सभी तालिकाओं के लिए डिफ़ॉल्ट ओवरराइड करने के बजाय, एक नई सीएसएस कक्षा का प्रयोग करें। '' '.टेबल-सीमा रहित टीडी, .टेबल-सीमा रहित वें { सीमा: 0; } '' 'से http://coderwall.com/p/hfurca –

51

बूटस्ट्रैप 3 में मैं एक टेबल कोई जोड़ दिया है -बॉर्डर वर्ग

.table-no-border>thead>tr>th, 
.table-no-border>tbody>tr>th, 
.table-no-border>tfoot>tr>th, 
.table-no-border>thead>tr>td, 
.table-no-border>tbody>tr>td, 
.table-no-border>tfoot>tr>td { 
    border-top: none; 
} 
+4

यह समाधान मेरे लिए काम करता था जबकि अन्य ने नहीं किया (समाधान [यहां] (http://stackoverflow.com/questions/18075794/bootstrap-table-without-stripe-borders) सहित)। रेल में 'बूटस्ट्रैप-एसएएस' के माध्यम से बूटस्ट्रैप 3 का प्रयोग करना। – Dennis

+5

यह काम करता है। शीर्ष जवाब आईएमओ होना चाहिए। –

+1

मेरे मामले में, यह काम नहीं करता है। मैं एक उत्तरदायी तालिका का उपयोग कर रहा हूं, और अपनी कक्षा ('.table-responsive') को किसी सीमा पर संशोधित नहीं किया है। – ArCiGo

15

बूटस्ट्रैप .min.css यदि आप बस .table td का उपयोग करते हैं तो अपनी खुद की स्टाइलशीट से अधिक विशिष्ट है। चारों ओर

.table>tbody>tr>th, .table>tbody>tr>td { 
    border-top: none; 
} 
+0

मुझे कुछ कोशिकाओं को लक्षित करने के समान कुछ करना था: ''table> tbody> tr> td.no-line { सीमा-शीर्ष: कोई नहीं; } ' – JoshP

+0

धन्यवाद। आपकी विधि ने मेरी मदद की। –

+0

एक कक्षा चौराहे चयनकर्ता के साथ, यह मेरे लिए इसे दबाया। धन्यवाद – nemesisfixx

0

अन्य तरीके से, यदि आप अपने पैनल के लिए लाइनों जोड़ना समस्या है न अपनी तालिका में जोड़ने के लिए भूल जाते हैं: तो यह बजाय का उपयोग करें। डिफ़ॉल्ट रूप से (http://getbootstrap.com/components/#panels), यह लाइन जोड़ने की संभावना है लेकिन इससे मुझे टैग जोड़ने में मदद मिली ताकि अब पंक्ति रेखाएं दिखायी जा सकें।

निम्न उदाहरण "शायद" अभ्यस्त पंक्तियों के बीच लाइनों प्रदर्शित:

<div class="panel panel-default"> 
    <!-- Default panel contents --> 
    <div class="panel-heading">Panel heading</div> 
    <!-- Table --> 
    <table class="table"> 
     <tr><td> Hi 1! </td></tr> 
     <tr><td> Hi 2! </td></tr> 
    </table> 
</div> 

निम्न उदाहरण पंक्तियों के बीच लाइनों को प्रदर्शित करेगी:

<div class="panel panel-default"> 
    <!-- Default panel contents --> 
    <div class="panel-heading">Panel heading</div> 
    <!-- Table --> 
    <table class="table"> 
     <thead></thead> 
     <tr><td> Hi 1! </td></tr> 
     <tr><td> Hi 2! </td></tr> 
    </table> 
</div> 
+0

+1। – Mood

2

यह वही मेरे लिए काम किया है ..

.table-no-border>thead>tr>th, 
.table-no-border>tbody>tr>th, 
.table-no-border>tfoot>tr>th, 
.table-no-border>thead>tr>td, 
.table-no-border>tbody>tr>td, 
.table-no-border>tfoot>tr>td, 
.table-no-border>tbody, 
.table-no-border>thead, 
.table-no-border>tfoot{ 
    border-top: none !important; 
    border-bottom: none !important; 
} 

इसे छीनने के लिए महत्वपूर्ण है!

+0

यह काम कर रहा है लेकिन ऐसा नहीं है कि यह '! महत्वपूर्ण' का उपयोग करने के लिए काम है – vamsikrishnamannem

0

एक दोस्त से एक ही सवाल मिला। मेरा सुझाव जो !Important की आवश्यकता नहीं है इस तरह दिखता है: मैं एक कस्टम क्लास "no-border" जोड़ता हूं जिसे बूटस्ट्रैप तालिका में जोड़ा जा सकता है।

.table.no-border tr td, .table.no-border tr th { 
    border-width: 0; 
} 

आप एक solution here

संबंधित मुद्दे