简体   繁体   中英

How to use solid border css style

As Elastic watches don't allow <style> , I need to use <th style=\\"...\\"> format. But somehow I can't get my solid borders to work properly.

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

How do I need to format 'border:2px solid #ddd;' so I can get a nice border. When I use <style> I can get it working like I want it:

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

But whatever I try in style=\\".. : 'border:2px solid #ddd;' 'border:2pxsolid#ddd;' No border is appearing

If you have trouble with the shorthand version of border you can split it:

So border:2px solid #ddd; become border-style:solid;border-color:#ddd;border-width:2px

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM