2013-10-10 36 views
4

我正在做一些bootstrap中的表的基本造型,並將單元格邊框變成深藍色。沒有什麼花哨和一個完全標準的桌子,但我不能爲我的生活制定出如何設計桌子桌子和桌子身體之間的邊界。我已經盡了一切努力讓這條線看起來和其他所有東西一樣。如何引導表頭和身體之間的3邊框

enter image description here

誰能告訴我如何創建一個自舉表上是不是灰色的細胞邊界。我的表也響應,但似乎沒有多大區別

.table td, .table th { 
    border: 1px solid #2980B9; 
} 

.table{ 
    border: 1px solid #2980B9; 
} 

    <div class="table-responsive"> 
    <table class="table"> 
     <thead> 
     <tr> 
      <th>1</th> 
      <th>Table cell</th> 
      <th>Table cell</th> 
      <th>Table cell</th> 
      <th>Table cell</th> 
      <th>Table cell</th> 
      <th>Table cell</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td>1</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
+0

應該說如果我在沒有頭部的情況下運行桌子,我會在桌子頂部看到一個灰色的邊框,這非常煩人 – EnduroDave

回答

17

您應該使用引導使用像這樣的選擇:http://jsfiddle.net/4tdS2

你的CSS可能是這個樣子:

.table { border: 1px solid #2980B9; } 
.table thead > tr > th { border-bottom: none; } 
.table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td { border: 1px solid #2980B9; } 
+0

完美。謝謝 – EnduroDave

0

我試過這個解決方案。它確實有效。但在我的桌子上,我有複選框。所以,如果我添加這些包括它<thead>

.table thead > tr > th {display:none;}

標籤並點擊複選框,它會選擇所有複選框下方。給它一種全選的感覺。
所以不是我說

.table thead > tr > th {display:none;} 

,使得表的標題將是不可見的。