Question

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

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规则引起的。特别是，规则说当边界由两个单元共享时，其他条件相同，“左边的那个（如果表的'方向'是'ltr';右边，如果是'rtl'并且进一步获得最高胜利。“因此，前一栏中单元格的右边界优先。

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

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

1 个答案: