स्ट्राइप / बॉर्डर के बिना बूटस्ट्रैप टेबल

Question

मैं बूटस्ट्रैप का उपयोग करते समय सीएसएस समस्या से जूझ रहा हूं। मैं Angular JS का उपयोग Angular UI.bootstrap (जो समस्या का हिस्सा हो सकता है) के साथ कर रहा हूँ।

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

लेकिन ऐसा लगता है कि भले ही मैं विशेष रूप से एक मेज पर सीमाओं को नहीं दिखाने के लिए कहता हूं, यह मजबूर है:

HTML:

<table class='table borderless'>

सीएसएस:

.borderless table {
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
}

तो यहाँ, मैं जो चाहता हूँ वह सिर्फ अंदर की सीमाएँ हैं।

Comments

आप बूटस्ट्रैप के किस संस्करण का उपयोग कर रहे हैं?

— मार्टिन बीन

मैं बूटस्ट्रैप का उपयोग कर रहा हूँ 2.3.1

— रोमेन

बूटस्ट्रैप 4 के साथ:। आधुनिक ट्रड,। मोडलेस ट्र थ्रू {बॉर्डर: कोई नहीं;}

— येवन्नी शशकोव

Answer 1

बॉर्डर स्टाइल tdतत्वों पर सेट है ।

एचटीएमएल:

<table class='table borderless'>

सीएसएस:

.borderless td, .borderless th {
    border: none;
}

अद्यतन: बूटस्ट्रैप 4.1 के बाद से आप .table-borderlessसीमा को हटाने के लिए उपयोग कर सकते हैं ।

https://getbootstrap.com/docs/4.1/content/tables/#borderless-table

Comments

नोट: आपको भी जोड़ना चाहिए .borderless th, क्योंकि बूटस्ट्रैप स्टाइल भी लागू होती है <th>।

— बेंजामिन

यदि आप बूटस्ट्रैप 3 का उपयोग कर रहे हैं, तो मेरे उत्तर की जांच करें ।

— डेविड पास्टर

मुझे सीमा जोड़ना था: कोई भी महत्वपूर्ण नहीं; यह काम करने के लिए।

— श्रीकांत जीवन

@SrikanthJeeva .. और आप बस सीएसएस शैली को लाइन में जोड़ते हैं style=, या इसे एक अनुकूलित फ़ाइल में डालते हैं और यह सुनिश्चित करते हैं कि बूटस्ट्रैप सीएसएस फ़ाइल की तुलना में इसे बाद में लोड किया गया है , बूटस्ट्रैप डिफ़ॉल्ट शैली को ओवरराइड करने के लिए। सीएसएस आदेश के साथ भरी हुई हैं; बाद वाला पूर्व को अधिलेखित कर देता है, और अधिक विशिष्ट अधिक सामान्य लोगों को अधिलेखित कर देता है।

— पश्चिमीगंज

बूस्टराप के लिए> 4.1 <table class='table table-borderless'>प्रति मैक्स नीचे उपयोग करें

— कब्र

Answer 2

बूटस्ट्रैप 3.2.0 का उपयोग करने से मुझे ब्रेट हेंडरसन समाधान के साथ समस्या थी (सीमाएं हमेशा थीं), इसलिए मैंने इसे सुधार दिया:

एचटीएमएल

<table class="table table-borderless">

सीएसएस

.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none;
}

Comments

भूल मत th: शरीर में तत्व .borderless tbody tr th(के रूप में में इस्तेमाल किया उदाहरण )

— Wietse

@DavidePastore यदि यह केवल तालिकाओं के लिए है, तो शायद इसके साथ उपसर्ग करें .table-, जैसा कि बूटस्ट्रैप 3 तालिका से संबंधित अन्य वर्गों (उदाहरण के लिए table-striped, आदि) के लिए करता है। तो नाम होगा table-borderless।

— एरोगाचेव

V4.0.0-Alpha.2 के लिए काम करता है। धन्यवाद!

— डोमिनोजो

जब तक मैं .table-borderless,इस शैली विनिर्देश की शुरुआत में शामिल नहीं हो जाता तब तक मुझे टेबल के नीचे एक सीमा मिल रही थी ।

— क्रिस्टोफर किंग

मैं table-borderlessइस doc getbootstrap.com/docs/3.3/css/#tables में नहीं देखता हूं । यह कहां से आया?

— अरुप रक्षित

Answer 3

बाकी के समान, लेकिन अधिक विशिष्ट:

    table.borderless td,table.borderless th{
     border: none !important;
}

Comments

आपको .table.borderless

— प्यार नहीं किया

@ समस जोन्स - क्या यह पूरी तालिका को प्रभावित करता है? मैं चाहता हूं कि कुछ पंक्तियों में नीचे की सीमा हो। मुझे बॉर्डर-टॉप चाहिए था।

— मार्कोज़ेन

बहुत महत्वपूर्ण है

— फ़िकर

Answer 4

.tableअपने <table>टैग में क्लास न जोड़ें । तालिकाओं पर बूटस्ट्रैप डॉक्स से :

मूल स्टाइलिंग के लिए- हल्के पैडिंग और केवल क्षैतिज डिवाइडर- बेस क्लास .tableको किसी में भी जोड़ें <table>। यह सुपर निरर्थक लग सकता है, लेकिन कैलेंडर और तारीख पिकर जैसे अन्य प्लगइन्स के लिए तालिकाओं के व्यापक उपयोग को देखते हुए, हमने अपनी कस्टम टेबल शैलियों को अलग करने का विकल्प चुना है।

Comments

यहां तक ​​कि इस तरह: html: <टेबल क्लास = 'बॉर्डरलेस'> सीएसएस:। सीमा रहित {बॉर्डर: कोई नहीं; } यह काम नहीं करता है।

— रोमेन

मैं क्रोम में वेब इंस्पेक्टर का उपयोग करने का सुझाव देता हूं और फिर देख रहा हूं कि कोई भी बॉर्डर्स लागू किया जा रहा है, क्योंकि डिफ़ॉल्ट रूप से टेबल में बॉर्डरस्ट्रैप का उपयोग अन्य घटकों जैसे डेट-पिकर्स आदि के साथ बूटस्ट्रैप का उपयोग करते समय नहीं होता है

— मार्टिन बीन

इसने बहुत अच्छा काम किया, मैं सिर्फ 'टेबल-कंडेस्ड' और अन्य वेरिएंट्स को 'टेबल' क्लास के बिना इस्तेमाल कर रहा हूं और सीमाओं से छुटकारा पा लिया। डॉक्स के रूप में महान टिप ने मुझे वहां थोड़ा सा फेंक दिया।

— क्रिस्मसैप

Answer 5

चूंकि बूटस्ट्रैप v4.1 आप table-borderlessअपनी तालिका में जोड़ सकते हैं , आधिकारिक दस्तावेज देखें :

<table class='table table-borderless'>

Answer 6

मेरे सीएसएस में:

.borderless tr td {
    border: none !important;
    padding: 0px !important;
}

मेरे निर्देशन में:

<table class='table borderless'>
    <tr class='borderless' ....>

मैंने td तत्व के लिए 'बॉर्डरलेस' नहीं रखा है।

परीक्षण किया और यह काम किया! सभी सीमाओं और पैडिंग को पूरी तरह से बंद कर दिया गया है।

Answer 7

मैंने बूटस्ट्रैप टेबल शैलियों का विस्तार किया जैसा कि डेविड पास्टर ने किया था, लेकिन उस पद्धति के साथ शैलियों को सभी बाल तालिकाओं पर भी लागू किया जाता है, और वे पाद पर लागू नहीं होते हैं।

एक बेहतर समाधान कोर बूटस्ट्रैप तालिका शैलियों की नकल करना होगा, लेकिन आपकी नई कक्षा के साथ:

.table-borderless>thead>tr>th
.table-borderless>thead>tr>td
.table-borderless>tbody>tr>th
.table-borderless>tbody>tr>td
.table-borderless>tfoot>tr>th
.table-borderless>tfoot>tr>td {
    border: none;
}

तब जब आप <table class='table table-borderless'>कक्षा के साथ केवल विशिष्ट तालिका का उपयोग करेंगे, तो पेड़ में कोई भी तालिका नहीं होगी।

Answer 8

इसे इस्तेमाल करे:

<table class='borderless'>

सीएसएस

.borderless {
 border:none;
}

नोट: जो आप पहले कर रहे थे वह काम नहीं कर रहा था क्योंकि आपका css कोड आपके .borderless टेबल के भीतर एक टेबल को लक्षित कर रहा था (जो संभवतः नहीं था)

Answer 9

मुझे पता है कि यह एक पुराना धागा है और आपने एक उत्तर दिया है, लेकिन मैंने सोचा कि मैं इसे पोस्ट कर दूंगा क्योंकि यह किसी और के लिए प्रासंगिक है जो वर्तमान में देख रहा है।

नए सीएसएस नियम बनाने का कोई कारण नहीं है, बस वर्तमान नियमों को पूर्ववत करें और सीमाएं गायब हो जाएंगी।

    .table> tbody> tr> वें,
    .table> tbody> tr> td {
        सीमा-शीर्ष: 0;
    }

आगे जा रहे हैं, के साथ कुछ भी स्टाइल

    .table

कोई सीमा नहीं दिखाएंगे।

Answer 10

border-Boostrap 4 से कक्षा का उपयोग करें

<td class="border-0"></td>

या

<table class='table border-0'></table>

अंतिम बदलाव के साथ वर्ग इनपुट को समाप्त करना सुनिश्चित करें जो आप करना चाहते हैं।

Answer 11

यह एक मेरे लिए काम किया।

<td style="border-top: none;">;

कुंजी आपको बॉर्डर-टॉप को जोड़ने की आवश्यकता है <td>

Comments

इनलाइन सीएसएस विशेषताओं को बुरा अभ्यास माना जाता है ।

— मार्टिन वान ड्रेल

Answer 12

मैं यहाँ खेल के लिए देर हो रही है लेकिन FWIW: जोड़ने .table-borderedएक करने के लिए .tableबस हर कोशिका के लिए एक पूर्ण सीमा जोड़कर एक सीमा के साथ तालिका लपेटता, यद्यपि।

लेकिन हटाने से .table-borderedअभी भी नियम रेखाएं निकल जाती हैं। यह एक शब्दार्थ मुद्दा है, लेकिन BS3 + नामकरण के साथ मैंने ओवरराइड्स के इस सेट का उपयोग किया है:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-xs-5">
      .table
      <table class="table">
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      <table class="table table-bordered">
        .table .table-bordered
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-5">
      <table class="table table-unruled">
        .table .table-unruled
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      <table class="table table-bordered table-unruled">
        .table .table-bordered .table-unruled
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</div>

Answer 13

hiddenइसके बजाय का उपयोग करें none:

.hide-bottom {
    border-bottom-style: hidden;
}

Answer 14

अधिकांश उदाहरण बहुत विशिष्ट और / या फूला हुआ प्रतीत होते हैं।

यहाँ बूटस्ट्रैप 4.0.0 (4.1 में .table-borderlessफिर भी अल्फा शामिल है) का उपयोग करके मेरा ट्रिम किया गया समाधान था ...

.table-borderless th{border:0;}
.table-borderless td{border:0;}

कई प्रस्तावित समाधानों के समान, लेकिन न्यूनतम बाइट्स,

नोट: यहाँ समाप्त हुआ क्योंकि मैं BS4.1 संदर्भ देख रहा था और यह पता नहीं लगा सका कि .table-borderlessमेरे 4.0 स्रोतों के साथ काम क्यों नहीं कर रहा था (जैसे: ऑपरेटर त्रुटि, डुह) here

Comments

सुधार: 4.1 अल्फा नहीं है। यह माना जाता है क्योंकि मैं उस संस्करण का उपयोग नहीं कर रहा था :58

— मावलो

Answer 15

कुछ मामलों में, किसी को टेबल-क्लास में बॉर्डर-स्पेसिंग का भी उपयोग करना चाहिए, जैसे:

सीमा-रिक्ति: 0-महत्वपूर्ण;

Answer 16

बूटस्ट्रैप को npm या cdn लिंक के साथ स्थापित करें

<table class="table table-borderless">
<thead>
<tr>
  <th scope="col">#</th>
  <th scope="col">First</th>
  <th scope="col">Last</th>
  <th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
  </tr>
  <tr>
  <th scope="row">3</th>
    <td colspan="2">Larry the Bird</td>
    <td>@twitter</td>
   </tr>
 </tbody>
</table>

इस लिंक के साथ संदर्भ प्राप्त करें