Alvin Alvin - 4 months ago 7
CSS Question

Margin top and box shadow not working in tbody

Provided my CSS and HTML code in the code snippet below. I tried to apply box-shadow to every

row
of my
tbody
, but it doesn't work.

Neither does
box-shadow
work, even
margin-top
isn't working.

I wanted to create some spaces between the
thead
and
tbody
. Did I miss out something?



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






Update


Is it possible if I want to achieve something like what is in the below table? Each item, for instance
Item 1
and
Item 2
is each a row of the tbody.

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

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

Answer

Adding pseudo class can help

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