將邊框設置爲表格中的指定列

我希望表格的第三列具有深藍色邊框。我不知道是否可以使用一行代碼，但是我的代碼只在將邊框設置爲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中工作。

來源

2014-02-19 erdomester

這是你在找什麼？ http://jsfiddle.net/hashem/Fe3Ya/1/ –

差不多。正如你看到的結果並不完美。我通過添加如果我現在添加'border：1px solid＃8398C4;'到'table td.popular'和'table tr.odd td.popular_2 {}' – erdomester

Btw一個帶有border-collapse屬性的解決方案要好一些，因爲邊界寬度現在是不同的。 – erdomester

該問題是由摺疊邊框模型的border conflict resolution規則引起的。特別是，規則說當兩個單元共享一個邊界時，其他條件相同時，「左邊的一個（如果表的'方向'是'ltr';右邊，如果它是'rtl' ），並進一步到最高勝。「因此，前一列中單元格的右邊界優先。

要解決這個問題，您可以在前面一列中的相關單元上設置border-right: none。細節取決於你想要在哪邊以及如何修改HTML標記以使這種樣式方便。

來源

2014-02-19 13:16:27

將邊框設置爲表格中的指定列

回答

相關問題