CODEWITHSUNDEEP
htmlcsscss-selectors
erdomester
erdomester

Reputation: 11829

Set border to a specified column in a table

I want the third column of the table to have a dark blue border. I don't know if it possible to do with one line, but my code works only if I set the border to 2px. With 1px the left border's color is the same as the other cells'.

Here is a 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;
}

Maybe the css nth-child() selector could be a solution but it doesn't work in IE8.

Upvotes: 0

Views: 295

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

The problem is caused by border conflict resolution rules for the collapsing border model. In particular, the rules say that when a border is shared by two cells, then, other things being equal, “the one further to the left (if the table's 'direction' is 'ltr'; right, if it is 'rtl') and further to the top wins.” So the right border of the cell in the preceding column takes preference.

To defeat this, you can set border-right: none on the relevant cells in the preceding column. The details depend on what borders you want to be there and how you wish to modify the HTML markup to make such styling convenient.

Upvotes: 2

Related Questions