将边框设置为表格中的指定列

我希望表格的第三列具有深蓝色边框。我不知道是否可以使用一行代码，但是我的代码只在将边框设置为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

将边框设置为表格中的指定列

回答

相关问题