我遇到了css表的标题边框半径问题

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>