代码之家 › 专栏 › 技术社区 › citronas

如何将具有内联样式的html表格格式化为呈现的Excel表格?

html-table border css html

citronas · 技术社区 · 14 年前

我现在被困在设置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>

其呈现方式如下: alt text

alt text

3 回复 | 直到 10 年前

Stephan Muller 8 年前

table {
  border-collapse:collapse;
}

Brent Bradburn 7 年前

这是快速和肮脏的(不是正式有效的HTML5),但它似乎工作-它是

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

没有进一步的样式 <tr> / <td>

Ralf de Kleine 14 年前

编辑:还删除了双像素边框。

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