Question

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

 <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           |
+------------------------------------------+

除了造成混乱之外，我还没有真正完成任何事情，这就是我将代码基本恢复到开头的原因。也许我在这里需要div，我不知道。谢谢你的帮助！

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>

以全页模式查看，然后调整浏览器窗口的大小。

表格样式中的表继承了混乱

2 个答案: