如何使用内联样式格式化 html 表格，使其看起来像呈现的 Excel 表格？答案

【问题标题】：How to format html table with inline styles to look like a rendered Excel table?如何使用内联样式格式化 html 表格，使其看起来像呈现的 Excel 表格？
【发布时间】：2011-04-09 15:42:47
【问题描述】：

我目前无法在 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>

它是这样渲染的：

我希望表格像 Excel 一样呈现，带有内边框和外边框：

【问题讨论】：

您使用的是哪个浏览器？在 Chrome 6 中，在这里看起来如你所愿：jsfiddle.net/JceAc.

标签： html css border html-table

【解决方案1】：

table {
  border-collapse:collapse;
}

【讨论】：

【解决方案2】：

这是快速而肮脏的（并且不是正式有效的 HTML5），但它似乎有效 - 根据问题，它是 inline ：

<table border='1' style='border-collapse:collapse'>

不需要进一步设置<tr>/<td> 标签的样式（对于基本表格网格）。

【讨论】：

我在找这个。所有其他答案都是style，只有这个答案是“内联”的。谢谢！
这应该被标记为正确答案。因为问题显然是关于内联样式的。

【解决方案3】：

添加 cellpadding 和 cellspacing 来解决它。编辑：还删除了双像素边框。

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

【讨论】：