html - 如何使用实心边框CSS样式

标签 html css border

因为 Elastic watch 不允许 <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

关于html - 如何使用实心边框CSS样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51661247/

相关文章:

ios - 如何制作双线边框的UIButton?

css - 在 Chrome/IE9 中去除图像边框

html - 在 Bootstrap 按钮组中划分间距

JQuery .resize 或媒体查询来获取响应式网站的宽度?

CSS 清除 :both not working

html - 为什么我的图像超链接可以从远离实际图像的较大边缘点击?

php - 域之间加一个点

html - 使用css表格中图片的大小

c++ - 需要一个用 C/C++ 或 Python 进行 HTTP/HTML 网络编程的库

html - 如何更改 HTML 代码中 3 列 CSS 布局的 div 顺序?