What is the best way to put a border solely inside a table?

Problem

I’m attempting to find out how to put a border to the table only. When I do this:

table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}

The border wraps around the entire table as well as between individual table cells. I’d want to have a border only inside the table, around the table cells (without outer border around the table).

Here’s the table markup I’m using (although though I don’t think it matters):

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

Here are some of the fundamental styles I use on the majority of my tables:

table {
    border-collapse: collapse;
    border-spacing: 0;
}

Asked by Richard Knop

Solution #1

You’ll need something a little more like this if you’re doing what I suspect you’re trying to do:

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
}
table tr:first-child th {
  border-top: 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:last-child,
table tr th:last-child {
  border-right: 0;
}

jsFiddle Demo

The issue is that you are using a ‘full border’ around all of the cells, giving the impression that the table is bordered.

Cheers.

EDIT: You can find a little more information on those pseudo-classes on quirksmode, but you’re pretty much out of luck in terms of IE support.

Answered by theIV

Solution #2

This is how it works for me:

table {
    border-collapse: collapse;
    border-style: hidden;
}

table td, table th {
    border: 1px solid black;
}

view example …

IE lacks support, as tested in FF 3.6 and Chromium 5.0; according to the W3C:

Answered by anthonyrisinger

Solution #3

Here’s an example of a very basic technique to get the desired effect:

<table border="1" frame="void" rules="all">
    <tr>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
    </tr>
    <tr>
        <td>4444</td>
        <td>5555</td>
        <td>6666</td>
    </tr>
</table>

Answered by jony

Solution #4

Here’s a quick fix for ordinary table markup that works on all BrowserStack devices/browsers except IE 7 and below:

table { border-collapse: collapse; }

td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }

Add this for IE 7 support:

tr + tr > td,
tr + tr > th { border-top: 1px solid; }

http://codepen.io/dalgard/pen/wmcdE/wmcdE/wmcdE/wmcdE/wmcdE/wmcdE/wmcdE/wmcdE

Answered by dalgard

Solution #5

To maintain compatibility with Internet Explorer 7 and 8, I recommend using first-child instead of last-child:

table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;}

table tr td:first-child{border-left:0;}

table tr:first-child td{border-top:0;}

Pseudo-classes in CSS 2.1 can be found at http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx.

Answered by Crisboot

Post is based on https://stackoverflow.com/questions/1257430/how-can-i-apply-a-border-only-inside-a-table