How to format html table with inline styles to look like a rendered Excel table?
Solution 1
table {
border-collapse:collapse;
}
Solution 2
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).
Solution 3
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>
Related videos on Youtube
citronas
I studied computer science and math and completed my academic career with a PhD in computer science about machine learning and argument mining on text data. I've returned to the corporate sector and am currently working as a Senior Software Developer for a digital media agency where I focus on designing and implementing solutions with ASP.NET Core MVC and C#.
Updated on April 24, 2020Comments
-
citronas about 4 years
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:
-
Kyle over 13 yearsWhich browser are you using? in Chrome 6, looks as you want it here: jsfiddle.net/JceAc.
-
-
Hrvoje T over 5 yearsI was looking for this. All other answers are with
style
, only this one is for `inline'. Thanks! -
Mohsin almost 4 yearsThis should be marked as correct answer. As question is clearly about inline style.