边距顶部和框阴影在 tbody 中不起作用

Question

在下面的代码片段中提供了我的 CSS 和 HTML 代码。我尝试将 box-shadow 应用到我的 tbody 的每个 row，但它不起作用。

box-shadow 也不行，甚至 margin-top 也不行。

我想在 thead 和 tbody 之间创建一些空格。我是不是漏掉了什么？

#myList {
  background: #fff;
  text-align: left;
  width: 100%;
  margin-top: 10%;
  margin-left: 6%;
}
#myList thead {
  font-size: 18px;
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin-bottom: 50%;
}
#myList tbody {
  margin-top: 20%;
}
#myList tbody td:first-child {
  display: none;
}
#myList tbody tr {
  box-shadow: 10px 10px 5px #888888;
}
#myList tbody td:nth-child(2) {
  width: 50%;
}
#myList tbody td {
  color: #00496B;
  font-size: 15px;
  font-weight: normal;
}

<table id="myList">
  <thead>
    <tr>
      <td>Product Name</td>
      <td>Qty</td>
      <td>Price</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>P1</td>
      <td>Adidas Superstar</td>
      <td>1</td>
      <td></td>
    </tr>
  </tbody>
</table>

Update

如果我想实现下面table中的东西，有可能吗？每个项目，例如 Item 1 和 Item 2 都是 tbody 的每一行。

 -------------------
|     Item 1        |
 ------------------

 -------------------
|     Item 2        |
 ------------------

Answer 1

添加伪 class 会有帮助

#myList {
  background: #fff;
  text-align: left;
  width: 100%;
  margin-top: 10%;
  margin-left: 6%;
  border-collapse:separate;
  border-spacing:0px 10px;
}
#myList thead {
  font-size: 18px;
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin-bottom: 50%;
}
#myList tbody {
  margin-top: 20%;
}
#myList tbody td:first-child {
  display: none;
}
#myList tbody tr {
  box-shadow: 10px 10px 5px #888888;
}
#myList tbody td:nth-child(2) {
  border-left:1px solid;
  width: 50%;
}
#myList tbody td {
  color: #00496B;
  font-size: 15px;
  font-weight: normal;
  border-top:1px solid;
  border-bottom:1px solid;
}



#myList tbody:before {
  content: "-";
  display: block;
  line-height: 1em;
  color: transparent;
}
#myList tbody td:last-child {
   border-right:1px solid;
}

<table id="myList">
  <thead>
    <tr>
      <td>Product Name</td>
      <td>Qty</td>
      <td>Price</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>P1</td>
      <td>Adidas Superstar</td>
      <td>1</td>
      <td></td>
    </tr>
    <tr>
      <td>P1</td>
      <td>Superstar</td>
      <td>2</td>
      <td></td>
    </tr>
  </tbody>
</table>

Answer 2

您可以添加

tbody:before {
    content: "-";
    display: inline-block;
    color: transparent;
}

#myList {
  background: #fff;
  text-align: left;
  width: 100%;
  margin-top: 10%;
  margin-left: 6%;
}
#myList thead {
  font-size: 18px;
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin-bottom: 50%;
}
tbody:before {
    content: "-";
    display: inline-block;
    color: transparent;
}
#myList tbody {
  margin-top: 20%;
}
#myList tbody td:first-child {
  display: none;
}
#myList tbody tr {
  box-shadow: 10px 10px 5px #888888;
}
#myList tbody td:nth-child(2) {
  width: 50%;
}
#myList tbody td {
  color: #00496B;
  font-size: 15px;
  font-weight: normal;
}

<table id="myList">
  <thead>
    <tr>
      <td>Product Name</td>
      <td>Qty</td>
      <td>Price</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>P1</td>
      <td>Adidas Superstar</td>
      <td>1</td>
      <td></td>
    </tr>
  </tbody>
</table>

边距顶部和框阴影在 tbody 中不起作用

Margin top and box shadow not working in tbody

html

css

css-tables