Question

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

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>$50</td>
    </tr>
  </tbody>
</table>

更新

如果我想实现下表中的内容，是否可能？每个项目，例如Item 1和Item 2都是tbody的一行。

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

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

Answer 1

添加伪类可以提供帮助

#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>$50</td>
    </tr>
    <tr>
      <td>P1</td>
      <td>Superstar</td>
      <td>2</td>
      <td>$60</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>$50</td>
    </tr>
  </tbody>
</table>

保证金顶部和框阴影在tbody中不起作用

2 个答案: