css - 如何获得边框折叠的 thead 和边框间距的 tbody 单元格？

Question

Example

我正在尝试为与上述示例类似的 Web 元素设计表格。

这是我尝试过的:

.table_RMA table{
width: 100%;
border-collapse: separate;
border-spacing: .5rem;
}
.table_RMA table thead{
color:white;
background: #1d5ba6;
border-radius: 9px;
box-shadow: -1px 1px 8px rgba(126, 114, 242, 0.58);
}
.table_RMA table tbody{
margin-top: 1rem;
}
.table_RMA table tbody tr td{
padding: 1rem;
text-align: center;
color:#1d5ba6;  
background: white;
border-radius: 9px;
box-shadow: -1px 1px 8px rgba(126, 114, 242, 0.58);
}

但我无法获得 <td> <tbody> 中的间距在 <th>的 <thead> .

Answer 1

你是否期待这样的:

#table-design {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
text-align:center;
}
#table-design td{
border:4px solid #d8d8ff;
padding: 6px;
-webkit-box-shadow: 1px 1px 15px rgba(0, 31, 255, 0.13);
-moz-box-shadow: 1px 1px 15px rgba(0, 31, 255, 0.13);
box-shadow: 1px 1px 15px rgba(0, 31, 255, 0.13);
}
#table-design tr{
background-color: #fff;
color:blue;
-webkit-box-shadow: 1px 1px 15px rgba(0, 31, 255, 0.13);
-moz-box-shadow: 1px 1px 15px rgba(0, 31, 255, 0.13);
box-shadow: 1px 1px 15px rgba(0, 31, 255, 0.13);
}
#table-design tr td{
border-radius:10px;
}
#table-design th {
padding-top: 12px;
padding-bottom: 12px;
background-color: #0065c6f7;
color: white;
  
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<table id="table-design">
  <tr>
    <th>Jours</th>
    <th>Date</th>
    <th>Presence</th>
     <th>Absence</th>
      <th>Nb.heures</th>
  </tr>
  <tr>
    <td>Lundi</td>
    <td>01/08/2019</td>
    <td><i class="fa fa-check-circle" style="font-size:36px;color:#3a9ffff7"></i></td>
        <td><i class="fa fa-check-circle" style="font-size:36px;color:lightgrey"></i></td>
    <td>7</td>

  </tr>
  <tr>
    <td>Maradi</td>
    <td>01/08/2019</td>
    <td><i class="fa fa-check-circle" style="font-size:36px;color:#3a9ffff7"></i></td>
        <td><i class="fa fa-check-circle" style="font-size:36px;color:lightgrey"></i></td>
    <td>7</td>
  </tr>
  
  
    <tr>
    <td>Mercredi</td>
    <td>01/08/2019</td>
    <td><i class="fa fa-check-circle" style="font-size:36px;color:#3a9ffff7"></i></td>
        <td><i class="fa fa-check-circle" style="font-size:36px;color:lightgrey"></i></td>
    <td>7</td>
  </tr>
  
      <tr>
    <td>Jeudi</td>
    <td>01/08/2019</td>
    <td><i class="fa fa-check-circle" style="font-size:36px;color:#3a9ffff7"></i></td>
        <td><i class="fa fa-check-circle" style="font-size:36px;color:lightgrey"></i></td>
    <td>7</td>
  </tr> 
</table>