CODEWITHSUNDEEP
htmlcsshtml-tableborder
Richard Knop
Richard Knop

Reputation: 83755

How can I apply a border only inside a table?

I am trying to figure out how to add a border only inside the table. When I do:

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

The border is around the whole table and also between table cells. I want to have a border only inside the table around table cells (without an outer border around the table).

Here is the markup I'm using for tables (even though I think that is not important):

<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>

And here are some basic styles I apply to most of my tables:

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

Upvotes: 222

Views: 430226

Answers (11)

Frank Fiegel
Frank Fiegel

Reputation: 193

Surprised not to see this as a solution, but here you go:

div {
  outline: 1px solid #f00;
  outline-offset: -1px;
  border-radius: 4px;
  display: flex;
}

table {
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 4px;
}

table td {
  border: 1px solid #f0f;
}
<div>
  <table>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
  </table>
</div>

Upvotes: 0

theIV
theIV

Reputation: 25794

If you are doing what I believe you are trying to do, you'll need something a little more like this:

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 problem is that you are setting a 'full border' around all the cells, which make it appear as if you have a border around the entire table.

EDIT: A little more info on those pseudo-classes can be found on quirksmode, and, as to be expected, you are pretty much S.O.L. in terms of IE support.

Upvotes: 230

Justina
Justina

Reputation: 21

This should work:

HTML:

<table frame="void" rules="all">

CSS:

td, th {
    border: 1px solid red;
}

Upvotes: 1

aarcangeli
aarcangeli

Reputation: 331

Works for any combination of tbody/thead/tfoot and td/th

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

table.inner-border > thead > tr > th,
table.inner-border > thead > tr > td,
table.inner-border > tbody > tr > th,
table.inner-border > tbody > tr > td,
table.inner-border > tfoot > tr > th,
table.inner-border > tfoot > tr > td {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

table.inner-border > thead > tr > :last-child,
table.inner-border > tbody > tr > :last-child,
table.inner-border > tfoot > tr > :last-child {
    border-right: 0;
}

table.inner-border > :last-child > tr:last-child > td,
table.inner-border > :last-child > tr:last-child > th {
    border-bottom: 0;
}
<table class="inner-border">
    <thead>
    <tr>
        <th>head1,1</th>
        <td>head1,2</td>
        <td>head1,3</td>
    </tr>
    <tr>
        <td>head2,1</td>
        <td>head2,2</td>
        <th>head2,3</th>
    </tr>
    </thead>
    <tr>
        <td>1,1</td>
        <th>1,2</th>
        <td>1,3</td>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
    <tr>
        <td>3,1</td>
        <td>3,2</td>
        <td>3,3</td>
    </tr>
    <thead>
    <tr>
        <th>foot1,1</th>
        <td>foot1,2</td>
        <td>foot1,3</td>
    </tr>
    <tr>
        <td>foot2,1</td>
        <th>foot2,2</th>
        <th>foot2,3</th>
    </tr>
    </thead>
</table>

Upvotes: 2

TCN
TCN

Reputation: 1651

Example of a very simple way for you to achieve 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>

Upvotes: 48

Crisboot
Crisboot

Reputation: 1480

Due to mantain compatibility with ie7, ie8 I suggest using first-child and not last-child to doing this:

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;}

You can learn about CSS 2.1 Pseudo-classes at: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

Upvotes: 11

bcr
bcr

Reputation: 3811

Add the border to each cell with this:

table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }

Remove the top border from all the cells in the first row:

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

Remove the left border from the cells in the first column:

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

Remove the right border from the cells in the last column:

table > tbody > tr > td:last-child { border-right: 0; }

Remove the bottom border from the cells in the last row:

table > tbody > tr:last-child > td { border-bottom: 0; }

http://jsfiddle.net/hzru0ytx/

Upvotes: 1

dalgard
dalgard

Reputation: 3664

For ordinary table markup, here's a short solution that works on all devices/browsers on BrowserStack, except IE 7 and below:

table { border-collapse: collapse; }

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

For IE 7 support, add this:

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

A test case can be seen here: http://codepen.io/dalgard/pen/wmcdE

Upvotes: 14

TwoFaceZ
TwoFaceZ

Reputation: 55

that will do it all without css <TABLE BORDER=1 RULES=ALL FRAME=VOID>

code from: HTML CODE TUTORIAL

Upvotes: 3

anthonyrisinger
anthonyrisinger

Reputation: 2949

this works for me:

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

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

view example ...

tested in FF 3.6 and Chromium 5.0, IE lacks support; from W3C:

Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.

Upvotes: 219

Rufinus
Rufinus

Reputation: 30773

this should work:

table {
 border:0;
}

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

edit:

i just tried it, no table border. but if i set a table border it is eliminated by the border-collapse.

this is the testfile:

<html>
<head>
<style type="text/css">
table {
    border-collapse: collapse;
    border-spacing: 0;
}


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


</style>
</head>
<body>
<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>

</body>
</html>

Upvotes: 5

Related Questions