I am trying to figure out how to add 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. What I want to achieve is to have border only inside the table around table cells (without outer border around the table).
Here is 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;
}
This question is related to
html
css
html-table
border
that will do it all without css
<TABLE BORDER=1 RULES=ALL FRAME=VOID>
code from: HTML CODE TUTORIAL
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
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
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.
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; }
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>
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>
Works for any combination of tbody/thead/tfoot and td/th
table.inner-border {_x000D_
border-collapse: collapse;_x000D_
border-spacing: 0;_x000D_
}_x000D_
_x000D_
table.inner-border > thead > tr > th,_x000D_
table.inner-border > thead > tr > td,_x000D_
table.inner-border > tbody > tr > th,_x000D_
table.inner-border > tbody > tr > td,_x000D_
table.inner-border > tfoot > tr > th,_x000D_
table.inner-border > tfoot > tr > td {_x000D_
border-bottom: 1px solid black;_x000D_
border-right: 1px solid black;_x000D_
}_x000D_
_x000D_
table.inner-border > thead > tr > :last-child,_x000D_
table.inner-border > tbody > tr > :last-child,_x000D_
table.inner-border > tfoot > tr > :last-child {_x000D_
border-right: 0;_x000D_
}_x000D_
_x000D_
table.inner-border > :last-child > tr:last-child > td,_x000D_
table.inner-border > :last-child > tr:last-child > th {_x000D_
border-bottom: 0;_x000D_
}
_x000D_
<table class="inner-border">_x000D_
<thead>_x000D_
<tr>_x000D_
<th>head1,1</th>_x000D_
<td>head1,2</td>_x000D_
<td>head1,3</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>head2,1</td>_x000D_
<td>head2,2</td>_x000D_
<th>head2,3</th>_x000D_
</tr>_x000D_
</thead>_x000D_
<tr>_x000D_
<td>1,1</td>_x000D_
<th>1,2</th>_x000D_
<td>1,3</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>2,1</td>_x000D_
<td>2,2</td>_x000D_
<td>2,3</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>3,1</td>_x000D_
<td>3,2</td>_x000D_
<td>3,3</td>_x000D_
</tr>_x000D_
<thead>_x000D_
<tr>_x000D_
<th>foot1,1</th>_x000D_
<td>foot1,2</td>_x000D_
<td>foot1,3</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>foot2,1</td>_x000D_
<th>foot2,2</th>_x000D_
<th>foot2,3</th>_x000D_
</tr>_x000D_
</thead>_x000D_
</table>
_x000D_
Source: Stackoverflow.com