如何使用内联样式设置 html 表格的格式,使其看起来像呈现的 Excel 表格?
我目前被困在 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 那样呈现表格,并具有内边框和外边框:
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:
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
这是快速而肮脏的(并且不是正式有效的 HTML5),但它似乎有效 - 并且根据问题它是内联的:
没有进一步的
< 样式/code>/
标签是必需的(对于基本表格网格)。
This is quick-and-dirty (and not formally valid HTML5), but it seems to work -- and it is inline as per the question:
No further styling of
<tr>
/<td>
tags is required (for a basic table grid).添加cellpadding和cellspacing即可解决。
编辑:还删除了双像素边框。
Add cellpadding and cellspacing to solve it.
Edit: Also removed double pixel border.