css 表格内去除边框,CSS-仅在表内边框

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;

}

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.

Cheers.

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.

this works for me:

table {

border-collapse: collapse;

border-style: hidden;

}

table td, table th {

border: 1px solid black;

}

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.

Example of a very simple way for you to achieve the desired effect:

1111	2222	3333
4444	5555	6666

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

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

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:

table {

border-collapse: collapse;

border-spacing: 0;

}

table {

border: 0;

}

table td, table th {

border: 1px solid black;

}

Heading 1	Heading 2
Cell (1,1)	Cell (1,2)
Cell (2,1)	Cell (2,2)
Cell (3,1)	Cell (3,2)

that will do it all without css

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;

}

head1,1head1,2head1,3head2,1head2,2head2,3

1,11,21,32,12,22,33,13,23,3

foot1,1foot1,2foot1,3foot2,1foot2,2foot2,3

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