Table style in table style inherit mess

Question

所以我在Codepen上发现了这个非常好的响应表示例，添加了一个可以切换隐藏行的选项（点击客户端号码），也许不是最好的解决方案，但是我需要在表格内添加一个新表格。 （在此隐藏的行）

JSFIDDLE HERE

<div class="wrapper"> 
<table> 
    <thead> 
     <tr> 
      <th width="70px">Ver</th> 
      <th width="60px">Mode</th> 
      <th>Hostname</th> 
      <th>Clients</th> 
      <th width="120px">Etc</th> 
      <th>Connect</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td data-label="Ver">[X]</td> 
      <td data-label="Mode">AAA</td> 
      <td data-label="Hostname">Name 1</td> 
      <td data-label="Clients"><a href="#" class="toggler" data-prod-cat="1">100</a></td> 
      <td data-label="Etc">aaa</td> 
      <td data-label="Connect">[BUTTON]</td> 
     </tr> 
        <tr class="cat1" style="display:none"> 

      <td colspan="3"><table align="center" width="100%"> 
      <tr><td width="33%">var1</td><td width="33%">var2</td><td width="33%">var3</td></tr> 
      </table></td> 
    </tr> 
     <tr> 
      <td data-label="Ver">[S]</td> 
      <td data-label="Mode">AAA</td> 
      <td data-label="Hostname">Name 2</td> 
      <td data-label="Clients">200</td> 
      <td data-label="Etc">aaa</td> 
      <td data-label="Connect">[BUTTON]</td> 
     </tr> 
    </tbody> 
</table> 
</div> 

我的问题是我的第二个表继承我的主表的样式，使之成为我完全无法使用。 （在桌面视图和也在移动视图，你可以看到它，如果你调整窗口的宽度600px以下的大小）所以基本上我想有一个“默认”内部表，没有继承如果可能的话。像这样（我的内表可以在移动视图中的相同）：

+------------------------------------------+ 
| FIRST ROW, CLICK ON THE NUMBER TO TOGGLE | 
+------------------------------------------+ 
    +------+------+------+ 
    | var1 | var2 | var3 | 
    +------+------+------+ 
    | aaaa | bbbb | cccc | 
    +------+------+------+ 
    | aaaa | bbbb | cccc | 
    +------+------+------+ 
+------------------------------------------+ 
| SECOND ROW, JUST CHILLIN' HERE   | 
+------------------------------------------+ 

除了创造一个烂摊子，我是不是真的能够做到什么，这就是为什么我基本恢复了代码开头。也许我需要divs，我不知道。谢谢你的帮助！

Answer 1

嗨你的td也需要自己的类名。这将覆盖现有的属性，我把事情搞糟与它周围一点：http://jsfiddle.net/GqS7W/887/

table td.innertd { 
    display: inline; 
    float: none; 
    text-align: center; 
} 

Answer 2

我已经做了表的混乱，以及，但我还是设法得到一些奇怪从中但功能。

CODEPEN

body { 
 
    font-family: arial; 
 
} 
 
table { 
 
    border: 1px solid #ccc; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
} 
 
table tr { 
 
    border: 1px solid #ddd; 
 
    padding: 5px; 
 
} 
 
table th, 
 
table td { 
 
    padding: 10px; 
 
    text-align: center; 
 
} 
 
table th { 
 
    text-transform: uppercase; 
 
    font-size: 14px; 
 
    letter-spacing: 1px; 
 
} 
 
/* Nested Table */ 
 

 
.sub { 
 
    display: table; 
 
    table-layout: fixed; 
 
    border-collapse: separate; 
 
    border-spacing: 5px; 
 
    border: 2px inset grey; 
 
    width: 100%; 
 
} 
 
.sub tr { 
 
    display: table-row; 
 
    padding: 2px; 
 
} 
 
.sub td { 
 
    display: table-cell; 
 
    min-width: 33%; 
 
    text-align: left; 
 
    word-spacing: 5px; 
 
} 
 
.breaker { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
/* Media Queries */ 
 

 
@media screen and (max-width: 600px) { 
 
    table { 
 
    border: 0; 
 
    } 
 
    table thead { 
 
    display: none; 
 
    } 
 
    table tr { 
 
    margin-bottom: 10px; 
 
    display: block; 
 
    } 
 
    table tr:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
    } 
 
    table tr:before { 
 
    display: block; 
 
    border-bottom: 2px solid #ddd; 
 
    } 
 
    table td { 
 
    box-sizing: border-box; 
 
    display: block; 
 
    float: left; 
 
    clear: left; 
 
    width: 100%; 
 
    text-align: right; 
 
    font-size: 13px; 
 
    border-bottom: 1px dotted #ccc; 
 
    } 
 
    table td:last-child { 
 
    border-bottom: 0; 
 
    } 
 
    table td:before { 
 
    content: attr(data-label); 
 
    float: left; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    } 
 
    .sub tr { 
 
    display: flex; 
 
    padding: 0; 
 
    } 
 
    .sub td { 
 
    min-width: 33%; 
 
    display: table-cell; 
 
    border-right: 1px solid grey; 
 
    border-left: 1px solid grey; 
 
    min-height: 100%; 
 
    } 
 
    .breaker { 
 
    display: block; 
 
    width: 100% 
 
    } 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <br/> 
 
    <title>NESTED TABLES</title> 
 
</head> 
 

 
<body> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>Payment</th> 
 
     <th>Issue Date</th> 
 
     <th>Amount</th> 
 
     <th>Period</th> 
 
     </tr> 
 
    </thead> 
 

 
    <tbody> 
 
     <tr> 
 
     <td data-label="Payment">Payment #1</td> 
 
     <td data-label="Issue Date">02/01/2015</td> 
 
     <td data-label="Amount">$2,311</td> 
 
     <td data-label="Period">01/01/2015 - 01/31/2015</td> 
 
     </tr> 
 
    </tbody> 
 
    <tbody class='sub'> 
 
     <td class='breaker' colspan='4'> 
 
     <tr> 
 
      <td data-label="Status"> 
 
      <br/>Bankruptcy</td> 
 
      <td data-label="Balance Due"> 
 
      <br/>$2,569</td> 
 
      <td data-label="Interest"> 
 
      <br/>$590.87</td> 
 
     </tr> 
 
     <tr> 
 
      <td data-label="Status"> 
 
      <br/>Rehabilitation</td> 
 
      <td data-label="Balance Due"> 
 
      <br/>$2,569</td> 
 
      <td data-label="Interest"> 
 
      <br/>$590.87</td> 
 
     </tr> 
 
     <tr> 
 
      <td data-label="Status"> 
 
      <br/>Default</td> 
 
      <td data-label="Balance Due"> 
 
      <br/>$2,569</td> 
 
      <td data-label="Interest"> 
 
      <br/>$590.87</td> 
 
     </tr> 
 
     <tr> 
 
      <td data-label="Status"> 
 
      <br/>Rehabilitation</td> 
 
      <td data-label="Balance Due"> 
 
      <br/>$2,569</td> 
 
      <td data-label="Interest"> 
 
      <br/>$590.87</td> 
 
     </tr> 
 
     </td> 
 

 
     <td class='breaker' colspan='4'> 
 
     <tr> 
 
      <td data-label="Status"> 
 
      <br/>Bankruptcy</td> 
 
      <td data-label="Balance Due"> 
 
      <br/>$2,569</td> 
 
      <td data-label="Interest"> 
 
      <br/>$590.87</td> 
 
     </tr> 
 
     <tr> 
 
      <td data-label="Status"> 
 
      <br/>Rehabilitation</td> 
 
      <td data-label="Balance Due"> 
 
      <br/>$2,569</td> 
 
      <td data-label="Interest"> 
 
      <br/>$590.87</td> 
 
     </tr> 
 
     <tr> 
 
      <td data-label="Status"> 
 
      <br/>Default</td> 
 
      <td data-label="Balance Due"> 
 
      <br/>$2,569</td> 
 
      <td data-label="Interest"> 
 
      <br/>$590.87</td> 
 
     </tr> 
 
     <tr> 
 
      <td data-label="Status"> 
 
      <br/>Rehabilitation</td> 
 
      <td data-label="Balance Due"> 
 
      <br/>$2,569</td> 
 
      <td data-label="Interest"> 
 
      <br/>$590.87</td> 
 
     </tr> 
 
     </td> 
 
    </tbody> 
 
    <tbody> 
 
     <tr> 
 
     <td data-label="Payment">Payment #2</td> 
 
     <td data-label="Issue Date">03/01/2015</td> 
 
     <td data-label="Amount">$3,211</td> 
 
     <td data-label="Period">02/01/2015 - 02/28/2015</td> 
 
     </tr> 
 
    </tbody> 
 

 
    </table> 
 
</body> 
 

 
</html>

查看在整页模式，然后调整浏览器窗口。