CODEWITHSUNDEEP
cssbordercss-tables
Ahmad Alfy
Ahmad Alfy

Reputation: 13371

Using CSS to make table's outer border color different from cells' border color

I want to use CSS to set a color of the outer border of the table ... Then the inner cells would have different border color ...

I created something like this :

table {
     border-collapse:collapse;
     border: 1px solid black; 
}

table td {
     border: 1px solid red;
}

Problem is, the table's color change and become red as you can see here : http://jsfiddle.net/JaF5h/

If the border width of the table is increased to be 2px it will work : http://jsfiddle.net/rYCrp/

I've been dealing with CSS and cross browsers issues for so long ... This is the first time I face something like that and I am totally stuck ... No idea what to do!

Any one knows how to get that fixed with border-width:1px ?

Upvotes: 22

Views: 74062

Answers (5)

Mike
Mike

Reputation: 61

The previous answers didn't fully resolve this for me. The accepted answer allows the internal borders to overlap the outer table border. After some experimentation I came up with the following solution.

By setting the table collapse style to separate the internal borders do not overlap the outer. From there the extra and doubled borders are eliminated.

HTML:

<table>
<tr>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
</tr>
 <tr>
     <td>Content</td>
     <td>Content</td>
     <td>Content</td>
</tr>
 <tr>
     <td>Content</td>
     <td>Content</td>
     <td>Content</td>
</tr>

CSS

table {
    border: 1px solid black;
    border-collapse: separate;
    border-spacing: 0;
}
table td, table th {
    border: 1px solid red;
}

table tr td {
    border-right: 0;
}
table tr:last-child td {
    border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
    border-left: 0;
}
table tr td{
    border-top: 0;
}

https://jsfiddle.net/o5ar81xg/

Upvotes: 6

Ritesh Mengji
Ritesh Mengji

Reputation: 6190

Try the following it worked for me:

table {
    border-collapse: collapse;
    border: solid #000; 
}

table td {
    border: 1px solid red;
}

Upvotes: 0

Rick Penabella
Rick Penabella

Reputation: 459

Create a div surrounding your table. Set the div border color for the outside of your table. DO NOT border-collapse your table. Instead, let your cells separate to show the (inner borders) background color of the div beneath. Then set the background cells to the background color of your choice.

HTML:

<div id="tableDiv">
    <table id="studentInformationTable">
        <!-- Add your rows, headers, and cells here -->
    </table>
</div>

CSS:

#tableDiv {
    margin-left: 40px;
    margin-right: 40px;
    border: 2px solid brown;
    background-color: white;
}

table {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-color: brown;
}

td, th {
    background-color: #e7e1d3;
    padding: 10px 25px 10px 25px;
    margin: 0px;
}

Upvotes: 4

mauteri
mauteri

Reputation: 531

Try this:

tbody { display:block; margin: -1px; }

Upvotes: 8

ajcw
ajcw

Reputation: 23794

I would acheive this by using adjacent selectors, like so:

table {
    border: 1px solid #000;
}

tr {
    border-top: 1px solid #000;
}

tr + tr {
    border-top: 1px solid red;
}

td {
    border-left: 1px solid #000;
}

td + td {
    border-left: 1px solid red;
}

It's a little bit repetitive, but it acheives the effect you're after by setting the top and left borders of the first row and column respectively, then overwriting the 'internal' rows and cells with red.

This won't of course work in IE6 as it doesn't understand the adjacent selectors.

http://jsfiddle.net/JaF5h/36/

Upvotes: 15

Related Questions