0
我希望表格的第三列具有深藍色邊框。我不知道是否可以使用一行代碼,但是我的代碼只在將邊框設置爲2px時才起作用。使用1px時,左邊框的顏色與其他單元格的顏色相同。將邊框設置爲表格中的指定列
這裏是一個的jsfiddle:http://jsfiddle.net/Fe3Ya/
HTML:
<table>
<tr>
<th class="empty" rowspan="3">
</th>
<th>
<p><span class="title">Basic</span></p>
</th>
<th>
<p><span class="title">Standard</span></p>
</th>
<th class="popular">
<p><span>Plus</span></p>
</th>
<th>
<p><span class="title">Solid</span></p>
</th>
</tr>
<tr>
<td>
<span class="subtitle">$19</span>
</td>
<td>
<span class="subtitle">$49</span>
</td>
<td class="popular">
<span class="subtitle">$99</span>
</td>
<td>
<span class="subtitle">$149</span>
</td>
</tr>
<tr class="odd">
<td>
<span class="col">per month</span>
</td>
<td>
<span class="col">per month</span>
</td>
<td class="popular_2">
<span class="col_popular">per month</span>
</td>
<td>
<span class="col">per month</span>
</td>
</tr>
<tr>
<td>
<span class="row">Best for</span>
</td>
<td>
<span class="col">Starters</span>
</td>
<td>
<span class="col">Fast growers</span>
</td>
<td class="popular">
<span class="col">Most Popular</span>
</td>
<td>
<span class="col">Large companies</span>
</td>
</tr>
<tr class="odd">
<td>
<span class="row">Users</span>
</td>
<td>
<span class="col">10</span>
</td>
<td>
<span class="col">30</span>
</td>
<td class="popular_2">
<span class="col_popular">100</span>
</td>
<td>
<span class="col">Unlimited</span>
</td>
</tr>
<tr>
<td>
<span class="row">Forms</span>
</td>
<td>
<span class="col">5</span>
</td>
<td>
<span class="col">10</span>
</td>
<td class="popular">
<span class="col">30</span>
</td>
<td>
<span class="col">Unlimited</span>
</td>
</tr>
<tr class="odd">
<td>
<span class="row">Reports</span>
</td>
<td>
<span class="col">10</span>
</td>
<td>
<span class="col">30</span>
</td>
<td class="popular_2">
<span class="col_popular">100</span>
</td>
<td>
<span class="col">Unlimited</span>
</td>
</tr>
<tr>
<td>
<span class="row">Entries</span>
</td>
<td>
<span class="col">100</span>
</td>
<td>
<span class="col">500</span>
</td>
<td class="popular">
<span class="col">Unlimited</span>
</td>
<td>
<span class="col">Unlimited</span>
</td>
</tr>
<tr class="odd">
<td>
<span class="row">SSL Encryption</span>
</td>
<td>
<span class="col">Up to 128-bit</span>
</td>
<td>
<span class="col">Up to 128-bit</span>
</td>
<td class="popular_2">
<span class="col_popular">Up to 256-bit</span>
</td>
<td>
<span class="col">Up to 256-bit</span>
</td>
</tr>
<tr>
<td>
<span class="row">Bandwith</span>
</td>
<td>
<span class="col">Unlimited</span>
</td>
<td>
<span class="col">Unlimited</span>
</td>
<td class="popular">
<span class="col">Unlimited</span>
</td>
<td>
<span class="col">Unlimited</span>
</td>
</tr>
<tr class="odd">
<td>
<span class="row">Storage</span>
</td>
<td>
<span class="col">2GB</span>
</td>
<td>
<span class="col">10GB</span>
</td>
<td class="popular_2">
<span class="col_popular">100GB</span>
</td>
<td>
<span class="col">Unlimited</span>
</td>
</tr>
<tr class="signup">
<td>
</td>
<td>
<a href="#">Sign up</a>
</td>
<td>
<a href="#">Sign up</a>
</td>
<td class="popular_bottom">
<a href="#">Sign up</a>
</td>
<td>
<a href="#">Sign up</a>
</td>
</tr>
</table>
CSS:
table {
border-collapse:collapse;
font-family: Calibri;
text-align:center;
margin-left:auto;
margin-right:auto;
}
/*first row*/
table th {
background: #BBCDF1;
padding:5px;
width:150px;
text-align:center;
}
table th.popular {
background: #36609F;
color:#FFFFFF;
border-left:1px solid #36609F;
border-right:1px solid #36609F;
border-top:1px solid #36609F;
text-align:center;
font-size: 21px;
}
th, td {
border:1px solid #D7D7D7;
}
/*second and third rows*/
span.title {
font-size: 21px;
color: #242424;
}
span.subtitle{
font-size:24px;
font-weight:bold;
color: #245B8B;
}
/*rest of the rows*/
table td {
width:150px;
padding:5px;
background:#FFFFFF;
}
table td.popular, td.popular_2, td.popular_bottom{
border-left:1px solid #8398C4;
border-right:1px solid #8398C4;
}
table td.popular{
background-color:#F3F7FE;
}
table tr.odd td.popular_2{
background-color:#8398C4;
}
table td.popular_bottom {
border-bottom:1px solid #8398C4;
}
table tr.odd td{
background-color:#D8E3F9;
}
th.empty{ /* left-top box */
background-color:#F6FAFF;
border-left:0;
border-top:0;
}
span.col {
color:#727272;
}
span.col_popular {
color:#FFFFFF;
}
也許CSS第n個孩子()選擇可能是一個解決方案,但它不在IE8中工作。
這是你在找什麼? http://jsfiddle.net/hashem/Fe3Ya/1/ –
差不多。正如你看到的結果並不完美。我通過添加如果我現在添加'border:1px solid#8398C4;'到'table td.popular'和'table tr.odd td.popular_2 {}' – erdomester
Btw一個帶有border-collapse屬性的解決方案要好一些,因爲邊界寬度現在是不同的。 – erdomester