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

【问题标题】：Set border to a specified column in a table为表格中的指定列设置边框
【发布时间】：2014-02-19 21:25:56
【问题描述】：

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

【问题讨论】：

这是您要找的吗？ jsfiddle.net/hashem/Fe3Ya/1
差不多。如您所见，结果并不完美。我通过添加如果我现在将border:1px solid #8398C4; 添加到table td.popular 和table tr.odd td.popular_2{} 来做到这一点
顺便说一句，带有border-collapse 属性的解决方案会更好，因为边框宽度现在不同了。

标签： html css css-selectors

【解决方案1】：

该问题是由折叠边框模型的border conflict resolution 规则引起的。特别是，规则说，当两个单元格共享一个边框时，在其他条件相同的情况下，“更靠左的那个（如果表格的'方向'是'ltr'；右，如果它是'rtl' ) 并进一步赢得冠军。”所以上一列单元格的右边框优先。

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

【讨论】：