如何刪除bootstrap 3.0中的邊框？

我需要幫助，我的表格邊界表的css覆蓋似乎不工作。我試圖創建一個表是這樣的：如何刪除bootstrap 3.0中的邊框？

<table class="table table-bordered"> 
    <tbody> 
     <tr> 
      <td>Collection 1</td> 
      <td>5</td> 
     </tr> 
     <tr> 
      <td>Collection 2</td> 
      <td>5</td> 
     </tr> 
     <tr> 
      <td colspan="2" class="no-line">-----------</td> 
     </tr> 
     <tr> 
      <td>Total </td> 
      <td>10</td> 
     </tr> 
    </tbody> 
</table>

在CSS，我嘗試了所有可能的組合只是爲了檢查其工作，但它仍然不刪除邊框。

.table-bordered > tbody > tr > td.no-line { 
border:none !important; 
border-right: none !important; 
border-left: none !important; 
border-top: none !important; 
border-right-style: none !important; 
border-left-style: none !important; 
}

請幫忙，非常感謝！ :)

來源

2016-04-27 user1899646

其簡單隻需添加類表接壤邊境{：0像素;}或表接壤邊境{：無;}其中任何一個就可以使用。 –

它實際上刪除邊框。您仍然看到的邊框是表格邊框。 Check this fiddle with your original code

一旦刪除表格邊框

.table-bordered{ 
    border:none; 
}

的邊界將會消失。 Check this fiddle

來源

2016-04-27 04:53:31 TheUknown

哇！這工作。我認爲這是桌子的邊框，但我不願意添加邊框：沒有任何邊框，因爲我教它會影響整個桌子。我仍然是一個新手，今天我學到了一些新東西。非常感謝你！ – user1899646

從技術上講，它確實刪除了整個表格邊框，但它並不重要，因爲行邊框仍然存在，因此如果表格邊框存在，除非它們的顏色和大小不同，否則您將永遠無法注意。 – TheUknown

順便說一句，引導刪除邊界的適當屬性是什麼？它是邊框：無或邊框：無？ – user1899646

如果使用的是引導，沒有必要創建自定義的CSS或修改存在CSS使用CDN


 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
 
     integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<table class="table table-bordered"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Collection 1</td> 
 
     <td>5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Collection 2</td> 
 
     <td>5</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="2" class="no-line">-----------</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Total </td> 
 
     <td>10</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2016-04-27 04:53:49

對於特定刪除邊框

<table class="table table-bordered"> 
    <tbody> 
     <tr> 
      <td >Collection 1</td> 
      <td>5</td> 
     </tr> 
     <tr> 
      <td class="noborder">Collection 2</td> 
      <td>5</td> 
     </tr> 
     <tr> 
      <td colspan="2" class="no-line">-----------</td> 
     </tr> 
     <tr> 
      <td>Total </td> 
      <td>10</td> 
     </tr> 
    </tbody> 
</table> 


<style> 

.noborder{ 
     border: none!important; 
} 
</style>

來源

2016-04-27 04:55:09 Dixit

嗨dkc007，感謝您的答覆。這僅適用於特定的元素嗎？我不希望整個桌子沒有邊界。 – user1899646

@ user1899646是的，我編輯了我的答案。 – Dixit

看這

.table-bordered, .table-bordered > tbody > tr > td { 
 
border:none !important; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<table class="table table-bordered"> 
 
    <tbody> 
 
     <tr> 
 
      <td>Collection 1</td> 
 
      <td>5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Collection 2</td> 
 
      <td>5</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2" class="no-line">-----------</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Total </td> 
 
      <td>10</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

來源

2016-04-27 05:04:57

如何刪除bootstrap 3.0中的​​邊框？

回答

相關問題

如何刪除bootstrap 3.0中的邊框？