我有一個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; 
 
\t 
 
} 
 

 
.tableco1 tr:first-child th:first-child { 
 
\t font-size: 14px; 
 
\t font-weight: 800; 
 
\t background-color: #005693; 
 
    border-top-left-radius: 15px; 
 
    border-bottom-left-radius: 15px; 
 
    color: #fff; 
 
    
 
} 
 
.tableco1 tr th:nth-child(2){ 
 
\t \t font-size: 14px; 
 
\t font-weight: 800; 
 
\t 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{ 
 
\t 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{ 
 
\t font-size: 13px; 
 
\t font-weight: 200; 
 
\t padding-left: 30px; 
 
\t color: #005693; 
 
\t background-color: #e6e6e6; 
 
\t 
 
} 
 

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

 
}

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

 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>hi</td> 
 
\t \t \t \t <td>hi</td> 
 
\t \t \t \t <td>hi</td> 
 
\t \t \t \t <td>hi</td> 
 
\t \t \t \t <td>hi</td> 
 
\t \t \t \t <td>hi</td> 
 
\t \t \t \t <td>hi</td> 
 
\t \t \t </tr> 
 
\t \t </table>