बूटस्ट्रैप तालिका। तालिका से सभी सीमाओं को कैसे हटाएं?

Question

bootstrap table से सभी (विशेष रूप से बाहरी वाले) सीमाओं को कैसे हटाएं?

एचटीएमएल

<style> 
    .table th, .table td { 
     border-top: none !important; 
     border-left: none !important; 
    } 
</style> 
<div class="row"> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-10"> 
     <br/> 
     <table data-toggle="table" data-striped="true"> 
      <thead> 
      <tr> 
       <th>Column 1</th> 
       <th>Column 2</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr> 
       <td>A</td> 
       <td>B</td> 
      </tr> 
      <tr> 
       <td>C</td> 
       <td>D</td> 
      </tr> 
      <tr> 
       <td>E</td> 
       <td>F</td> 
      </tr> 
      </tbody> 
     </table> 
    </div>  
    <div class="col-xs-1"></div> 
</row> 

http://jsfiddle.net/sba7wkvb/1/

कौन सा सीएसएस शैलियों सभी सीमाओं को दूर करने के लिए ओवरराइड किया जा करने की जरूरत है: यहाँ तक आंतरिक बॉर्डर के बिना एक मेज है?

Answer 1

इस मामले आप तालिका नीचे सीमा निर्धारित करने की आवश्यकता में और सीमाओं चारों ओर टेबल हेड आर, तालिका डेटा, तालिका कंटेनर सभी सीमाओं से पूरी तरह से छुटकारा पाने के लिए सभी 0px क्रम में।

.table { 
 
    border-bottom:0px !important; 
 
} 
 
.table th, .table td { 
 
    border: 1px !important; 
 
} 
 
.fixed-table-container { 
 
    border:0px !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/> 
 

 
<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.4/js/bootstrap.min.js"></script> 
 
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script> 
 

 
<div class="row"> 
 
    <div class="col-xs-1"></div> 
 
    <div class="col-xs-10"> 
 
     <br/> 
 
     <table data-toggle="table" data-striped="true"> 
 
      <thead> 
 
      <tr> 
 
       <th>Column 1</th> 
 
       <th>Column 2</th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr> 
 
       <td>A</td> 
 
       <td>B</td> 
 
      </tr> 
 
      <tr> 
 
       <td>C</td> 
 
       <td>D</td> 
 
      </tr> 
 
      <tr> 
 
       <td>E</td> 
 
       <td>F</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
    </div>  
 
    <div class="col-xs-1"></div>

Answer 2

आप टेबल टेबल-नो-बोर्डर्ड में कक्षा विकल्प सेट कर सकते हैं, उदाहरण: http://issues.wenzhixin.net.cn/bootstrap-table/#options/no-bordered.html।

संपादित करें: यह सुविधा केवल विकसित संस्करण (v1.7.0 के बाद) में समर्थित है: https://github.com/wenzhixin/bootstrap-table/tree/master/src।

Answer 3

बदलें .fixed-table-container

सीएसएस के लिए सीएसएस में border का आकार:

.table th, .table td { 
    border-top: none !important; 
    border-left: none !important; 
} 
.fixed-table-container { 
    border:0px; 
} 

http://jsfiddle.net/sba7wkvb/3/

Answer 4

आप .fixed-table-containerऔर.table करने के लिए border: none !important; सेट की जरूरत है। अपने पहले नियम, .table th, .table td पर border-bottom: none !important; भी सेट करें।
अपडेट किया गया फिडल: http://jsfiddle.net/sba7wkvb/5/

Answer 5

इस प्रयास करें:

.table th, .table td { 
    border-top: none !important; 
    border-left: none !important; 
} 
.fixed-table-container { 
    border:0px; 
} 
.table th { 
    border-bottom: none !important; 
} 
.table:last-child{ 
    border:none !important; 
} 

Demo JSFiddle

Answer 6

के लिए बाहरी सीमा को हटाने आप इस प्रकार .fixed-table-container से सीमा को दूर करना चाहिए:

.fixed-table-container{border: 0px;} 

Answer 7

यह आसान है, कृपया जोड़ने आपके सीएसएस शीट में नीचे कोड। यह वें में सभी सीमाओं को हटा देगा ई तालिका

.table th, .table td, .table { 
    border-top: none !important; 
    border-left: none !important; 
    border-bottom: none !important; 
} 
.fixed-table-container { 
    border:0px; 
    border-bottom: none !important; 
} 

आशा में मदद की।

Answer 8

आप CSS3 उपयोग कर रहे हैं यह तुम्हारी मदद करेगा:

.table tbody tr td, .table tbody tr th { 
    border: none; 
}