我在 css table 的页眉边框半径方面遇到问题

Question

我正在努力实现与此类似的目标：

但我坚持这个：

这是我目前的css

.tableco1{
  font-family: Raleway;
  width: 700px;
  min-width: 500px;
  padding-top: 15px;
  padding-left: 15px;
  border-collapse: collapse;
  color: #005693;
  border-radius: 10px;
  font-size: 12px;
  text-align: center;

}

.tableco1 tr:first-child th:first-child {
  font-size: 14px;
  font-weight: 800;
  background-color: #005693;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  color: #fff; 

}
.tableco1 tr th:nth-child(2){
  font-size: 14px;
  font-weight: 800;
  background-color: #005693;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topright: 15px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;   
  color: #fff; 
}
/* Top Right */
.tableco1 tr:first-child th:last-child{
  background-color: #e6e6e6;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topright: 15px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;   
}

.tableco1 tr th{
  font-size: 13px;
  font-weight: 200;
  padding-left: 30px;
  color: #005693;
  background-color: #e6e6e6;

}

.tableco1 tr {
  height: 30px;
  background: #F8F8F8;

}

<table class="tableco1">
  <tr>
    <th>Client ID:</th>
    <th>M40014</th>
    <th></th>
    <th>M</th>
    <th colspan="2">Pepsico de México</th>

  </tr>
  <tr>
    <td>hi</td>
    <td>hi</td>
    <td>hi</td>
    <td>hi</td>
    <td>hi</td>
    <td>hi</td>
    <td>hi</td>
  </tr>
</table>

这是 jsfiddle http://jsfiddle.net/knLqwzwc/

有什么方法可以把整个背景涂成那种颜色吗？

Answer 1

您可以使用 :before 和 :after

这是我自定义的代码。请检查并告诉我 :)

.tableco1{
  font-family: Raleway;
  width: 700px;
  min-width: 500px;
  padding-top: 15px;
  padding-left: 15px;
  border-collapse: collapse;
  color: #005693;
  border-radius: 10px;
font-size: 12px;
text-align: center;
 
}

.tableco1 tr:first-child th:first-child {
 font-size: 14px;
 font-weight: 800;
 background-color: #005693;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    color: #fff; 
  
}
.tableco1 tr th:nth-child(2){
  font-size: 14px;
 font-weight: 800;
 background-color: #005693;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;   
    color: #fff; 
  position: relative;
  z-index: 99;
}
.tableco1 tr th:nth-child(2):before,
.tableco1 tr th:nth-child(2):after{
  content: '';
  width: 20px;
  height: 100%;
  background: #e6e6e6;
  position: absolute;
  top: 0;
  right: 0;
  }
.tableco1 tr th:nth-child(2):after{
  background: #005693;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;  
  }
/* Top Right */
.tableco1 tr:first-child th:last-child{
 background-color: #e6e6e6;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topright: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;   
}

.tableco1 tr th{
 font-size: 13px;
 font-weight: 200;
 padding-left: 30px;
 color: #005693;
 background-color: #e6e6e6;
 
}

.tableco1 tr {
  height: 30px;
  background: #F8F8F8;

}

<table class="tableco1">
   <tr>
    <th>Client ID:</th>
    <th>M40014</th>
    <th></th>
    <th>M</th>
    <th colspan="2">Pepsico de México</th>

   </tr>
   <tr>
    <td>hi</td>
    <td>hi</td>
    <td>hi</td>
    <td>hi</td>
    <td>hi</td>
    <td>hi</td>
    <td>hi</td>
   </tr>
  </table>

我在 css table 的页眉边框半径方面遇到问题

I'm having trouble with the header border radius of a css table

html

css

html-table