html - 给表格中的指定列设置边框

Question

我希望表格的第三列有深蓝色边框。我不知道是否可以用一行来做，但我的代码只有在我将边框设置为 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 nth-child() 选择器可能是一个解决方案，但它在 IE8 中不起作用。

Answer 1

问题是由border conflict resolution引起的折叠边界模型的规则。特别是，规则规定当两个单元格共享边框时，在其他条件相同的情况下，“更靠左的那个(如果表格的‘direction’是‘ltr’；右边，如果是‘rtl’ ) 并进一步取得最高胜利。”因此，优先考虑前一列中单元格的右边框。

要解决这个问题，您可以在前一列中的相关单元格上设置 border-right: none。详细信息取决于您想要的边框以及您希望如何修改 HTML 标记以使此类样式方便。