如何使用实心边框css样式



由于Elastic手表不允许<style>,我需要使用<th style="...">格式。但不知怎么的,我无法让我坚实的边界正常工作。

<html>
<body>
<table style="font-family:'TrebuchetMS',Arial,Helvetica,sans-serif;background-color:#D8E5E8;border-collapse:collapse;width:100%;max-width:700px;min-width:100px;text-align:center;border:2px solid #ddd;">
<tr>
<th style="font-size:12pt;background-color:#1A94BD;color:white;height:20px;padding:2px;vertical-align:middle;border:2pxsolid#ddd;">Timestamp</th>
<th style="font-size:12pt;background-color:#1A94BD;color:white;height:20px;padding:2px;vertical-align:middle;border:2pxsolid#ddd;">User</th>
<th style="font-size:12pt;background-color:#1A94BD;color:white;height:20px;padding:2px;vertical-align:middle;border:2pxsolid#ddd;">Event Type</th>
<th style="font-size:12pt;background-color:#1A94BD;color:white;height:20px;padding:2px;vertical-align:middle;border:2pxsolid#ddd;">Node Name</th>
<th style="font-size:12pt;background-color:#1A94BD;color:white;height:20px;padding:2px;vertical-align:middle;border:2pxsolid#ddd;">Uri</th>
</tr>
{{#ctx.payload.list}}
<tr>
<td style="font-size:10pt;height:20px;padding:2px;vertical-align:middle;border:2px solid #ddd;">{{be_time}}</td>
<td style="font-size:10pt;height:20px;padding:2px;vertical-align:middle;border:2px solid #ddd;">{{user}}</td>
<td style="font-size:10pt;height:20px;padding:2px;vertical-align:middle;border:2px solid #ddd;">{{event_type}}</td>
<td style="font-size:10pt;height:20px;padding:2px;vertical-align:middle;border:2px solid #ddd;">{{node_name}}</td>
<td style="font-size:10pt;height:20px;padding:2px;vertical-align:middle;border:2px solid #ddd;">{{uri}}</td>
</tr>
{{/ctx.payload.list}}
</table>
</body>
</html>

我需要如何格式化'border:2px solid #ddd;',以便获得一个漂亮的边框。当我使用<style>时,我可以让它像我想要的那样工作:

<style>table{font-family:'TrebuchetMS',Arial,Helvetica,sans-serif;background-color:#D8E5E8;border-collapse:collapse;width:100%;max-width:700px;min-width:100px;text-align:center;}table,th,td{border:2px solid #ddd;}th,td{height:20px;padding:2px;vertical-align:middle;}td{font-size:10pt;}th{font-size:12pt;background-color:#1A94BD;color:white;}</style>

但无论我在style="..中尝试什么:'border:2px solid #ddd;''border:2pxsolid#ddd;'没有出现边界

如果您对border的简写版本有问题,可以将其拆分:

所以border:2px solid #ddd;变成了border-style:solid;border-color:#ddd;border-width:2px

https://developer.mozilla.org/en-US/docs/Web/CSS/border

最新更新