2017-04-21 76 views
1

由於某種原因,我需要一個表格中的表格。父表格每個都有一個邊框,但最後一個是<tr>。孩子的桌子應該沒有邊界。然而,我無法用CSS去除它們。嘗試了幾個我能找到的解決方案,但都沒有爲我工作。奇怪的是CSS的其餘遇到,只有邊界是持續性...從另一個表格的表格中刪除邊框

.table_wrapzm { 
 
    border-collapse: collapse; 
 
    font-family: Arial, Helvetica; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: center; 
 
} 
 

 
.table_wrapzm tr { 
 
    border-bottom: 1px solid #ddd; 
 
} 
 

 
.table_wrapzm .h3 { 
 
    font-size: large; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 

 
.table_wrapzm .bron { 
 
    font-size: small; 
 
    text-align: left; 
 
    color: #ddd; 
 
} 
 

 
.table_wrapzm a:link { 
 
    color: #ddd; 
 
} 
 

 
.table_wrapzm a:visited { 
 
    color: #ddd; 
 
} 
 

 
.table_wrapzm a:hover { 
 
    color: black; 
 
} 
 

 
.table_wrapzm a:active { 
 
    color: #ddd; 
 
} 
 

 
.table_wrapzm td { 
 
    padding-bottom: 3px; 
 
} 
 

 
.table_wrapzm tr:last-child { 
 
    border-bottom: none; 
 
} 
 

 
.table_wrapzm .main { 
 
    padding: 10px 0 10px 0; 
 
} 
 

 

 
/* tabel inside table */ 
 

 
.table_zm { 
 
    border: none !important; 
 
    background: black; 
 
    color: white; 
 
    font-family: Arial, Helvetica; 
 
    text-align: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.table_zm .h3 { 
 
    font-size: large; 
 
    font-weight: bold; 
 
} 
 

 
.table_zm td { 
 
    padding: 3px; 
 
}
<table class="table_wrapzm"> 
 
    <tr> 
 
    <td class="h3">Title</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="main"> 
 
     <table class="table_zm"> 
 
     <tr> 
 
      <td>Row 1 col 1</td> 
 
      <td>Row 1 col 2</td> 
 
      <td>row 1 col 3</td> 
 
      <td>Row 1 col 4</td> 
 
      <td>row 1 col 5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Row 2 col 1</td> 
 
      <td>&nbsp;</td> 
 
      <td>row 2 col 3</td> 
 
      <td>&nbsp;</td> 
 
      <td>row 2 col 5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>row 3 col 1</td> 
 
      <td colspan="3">&nbsp;</td> 
 
      <td>Row 3 col 5</td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> source</td> 
 
    </tr> 
 
</table>

+2

將表格邊框樣式定義爲表格單元格,而不是表格本身。 }'。 – skobaljic

+0

我很難看到你正在嘗試刪除的是什麼https://codepen.io/pjabbott/pen/wdWMBB –

+0

@skobaljic工作!我想我已經嘗試過了,但它仍然存在於緩存中,因此在刷新了您的解決方案之後! –

回答

0
.table_zm td { border: 0 none; } 

至於建議由@skobaljic做的工作。非常感謝! `.table_zm td {border:0 none;