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

我希望表格的第三列有深蓝色边框。我不知道是否可以只使用一行代码，但我的代码只有在将边框设置为2px时才能工作。使用1px时，左边框的颜色与其他单元格的颜色相同

下面是一个JSFIDLE：

HTML:

css nth-child（）选择器可能是一个解决方案，但它在IE8中不起作用。

该问题是由折叠边框模型的规则引起的。特别是，规则规定，当一个边框由两个单元格共享时，如果其他条件相同，“越靠左（如果表格的‘方向’是‘ltr’；越靠右，如果是‘rtl’）越靠前的单元格越赢。”因此，前一列单元格的右边框优先

---

要解决此问题，可以在上一列中的相关单元格上设置

右边框：无

。详细信息取决于您希望出现的边框以及您希望如何修改HTML标记以方便此类样式设置。

这就是您想要的吗？几乎。正如你所见，结果并不完美。我现在添加

border:1px solid#8398C4

到

表td.popular

和

表tr.odd td.popular_2{}

顺便说一句，使用

边框折叠

属性的解决方案会更好，因为现在边框宽度不同。

<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>

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;
}