如何使用内联样式格式化 html 表格以使其看起来像呈现的 Excel 表格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3666541/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to format html table with inline styles to look like a rendered Excel table?
提问by citronas
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 表中设置边框。（我使用内联样式在电子邮件客户端中更好地呈现）我有这段代码：
<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:
我希望表格像 Excel 渲染表格一样呈现，带有内边框和外边框：
回答by Stephan Muller
table {
border-collapse:collapse;
}
回答by Ralf de Kleine
Add cellpadding and cellspacing to solve it. Edit: Also removed double pixel border.
添加 cellpadding 和 cellpacing 来解决它。编辑：还删除了双像素边框。
<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>
回答by nobar
This is quick-and-dirty (and not formally valid HTML5), but it seems to work -- and it is inlineas per the question:
这是快速而肮脏的（并且不是正式有效的 HTML5），但它似乎有效 -根据问题它是内联的：
<table border='1' style='border-collapse:collapse'>
No further styling of <tr>/<td>tags is required (for a basic table grid).
不需要进一步的<tr>/<td>标签样式（对于基本表格网格）。
