I'm currently stuck setting borders in an html table. (I use inline styles for a better rendering in e-mail-clients) I have this piece of code:
<html>
<body>
<table style="border: 1px solid black;">
<tr>
<td width="350" style="border: 1px solid black ;">
Foo
</td>
<td width="80" style="border: 1px solid black ;">
Foo1
</td>
<td width="65" style="border: 1px solid black ;">
Foo2
</td>
</tr>
<tr style="border: 1px solid black;">
<td style="border: 1px solid black;">
Bar1
</td>
<td style="border: 1px solid black;">
Bar2
</td>
<td style="border: 1px solid black;">
Bar3
</td>
</tr>
<tr style="border: 1px solid black;">
<td style="border: 1px solid black;">
Bar1
</td>
<td style="border: 1px solid black;">
Bar2
</td>
<td style="border: 1px solid black;">
Bar3
</td>
</tr>
</table>
</body>
</html>
It is rendered like this:
I want the table to be rendered like Excel would render a table, with inner and outer border:
This question is related to
html
css
border
html-table
The answer is
table {
border-collapse:collapse;
}
This is quick-and-dirty (and not formally valid HTML5), but it seems to work -- and it is inline as per the question:
<table border='1' style='border-collapse:collapse'>
No further styling of <tr>/<td> tags is required (for a basic table grid).
Add cellpadding and cellspacing to solve it. Edit: Also removed double pixel border.
<style>
td
{border-left:1px solid black;
border-top:1px solid black;}
table
{border-right:1px solid black;
border-bottom:1px solid black;}
</style>
<html>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td width="350" >
Foo
</td>
<td width="80" >
Foo1
</td>
<td width="65" >
Foo2
</td>
</tr>
<tr>
<td>
Bar1
</td>
<td>
Bar2
</td>
<td>
Bar3
</td>
</tr>
<tr >
<td>
Bar1
</td>
<td>
Bar2
</td>
<td>
Bar3
</td>
</tr>
</table>
</body>
</html>
Source: Stackoverflow.com