I'm trying to add a border to my custom pane table rows but nothing is appearing either around the entire table or on each row.

       s = s + "<table style=border-collapse: separate; border: 5px solid red; width=\"100%\">"
       s = s + "<tr><td style=\"text-align:center;\" width=\"100%\"><p>Attacks</p></td></tr>"
        s = s + "<tr style=border: 1px solid red;><td style=\"text-align:center;\" width=\"100%\"><a onclick=\"ASLEvent('StatusLinkAttacks', 'Attack1');\" style=\";cursor:pointer;\" title=\"Attack1\">Attack 1</a></td></tr>"
       s = s + "<tr style=border: 1px solid red;><td style=\"text-align:center;\" width=\"100%\"><a onclick=\"ASLEvent('StatusLinkAttacks', 'Attack2');\" style=\";cursor:pointer;\" title=\"Attack 2\">Attack 2</a></td></tr>"
        s = s + "<tr style=border: 1px solid red;><td style=\"text-align:center;\" width=\"100%\"><a onclick=\"ASLEvent('StatusLinkAttacks', 'Attack3');\" style=\";cursor:pointer;\" title=\"Attack 3\">Attack 3</a></td></tr>"
        s = s + "</table>"

You're missing out the quotes around the style attribute.

       s = s + "<table style=\"border-collapse: separate; border: 5px solid red;\" width=\"100%\">"
       s = s + "<tr><td style=\"text-align:center;\" width=\"100%\"><p>Attacks</p></td></tr>"
       s = s + "<tr style=\"border: 1px solid red;\"><td style=\"text-align:center;\" width=\"100%\"><a onclick=\"ASLEvent('StatusLinkAttacks', 'Attack1');\" style=\"cursor:pointer;\" title=\"Attack1\">Attack 1</a></td></tr>"
       s = s + "<tr style=\"border: 1px solid red;\"><td style=\"text-align:center;\" width=\"100%\"><a onclick=\"ASLEvent('StatusLinkAttacks', 'Attack2');\" style=\"cursor:pointer;\" title=\"Attack 2\">Attack 2</a></td></tr>"
       s = s + "<tr style=\"border: 1px solid red;\"><td style=\"text-align:center;\" width=\"100%\"><a onclick=\"ASLEvent('StatusLinkAttacks', 'Attack3');\" style=\"cursor:pointer;\" title=\"Attack 3\">Attack 3</a></td></tr>"
       s = s + "</table>"

But your code would probably be more readable (and easier to maintain) if you used classes to apply style information

I tried classes but it just ends up being displayed in the custom pane rather than being applied to the buttons:

https://drive.google.com/file/d/1nlK3UgyUXgBX5I95Jjgx4QL5BuTTncoq/view?usp=sharing

// Attacks
s = s + ".button { color: blue; border: 1px solid red; text-align:center; width="100%"}"

        s = s + "<table style=\"border-collapse: separate;\" width=\"100%\">"
        s = s + "<tr><td style=\"text-align:center; text-decoration: underline;\" width=\"100%\"><p>Attacks</p></td></tr>"
        s = s + "<tr><td class=\"button\"><a onclick=\"ASLEvent('StatusLinkAttacks', 'Attack1');\" style=\";cursor:pointer;\" title=\"Attack 1\">Attack 1</a></td></tr>"
        s = s + "<tr><td class=\"button\"><a onclick=\"ASLEvent('StatusLinkAttacks', 'Attack2');\" style=\";cursor:pointer;\" title=\"Attack 2\">Attack 2</a></td></tr>"
        s = s + "<tr><td class=\"button\"><a onclick=\"ASLEvent('StatusLinkAttacks', 'Attack3');\" style=\";cursor:pointer;\" title=\"Attack 3\">Attack 3</a></td></tr>"
        s = s + "</table>"

I would suggest applying a class to the table might be easier to read. Something like:

        s = s + "<table class=\"statusattackbuttons\">"
        s = s + "<tr><th>Attacks</th></tr>"
        s = s + "<tr><td><a onclick=\"ASLEvent('StatusLinkAttacks', 'Attack1');\" title=\"Attack 1\">Attack 1</a></td></tr>"
        s = s + "<tr><td><a onclick=\"ASLEvent('StatusLinkAttacks', 'Attack2');\" title=\"Attack 2\">Attack 2</a></td></tr>"
        s = s + "<tr><td><a onclick=\"ASLEvent('StatusLinkAttacks', 'Attack3');\" title=\"Attack 3\">Attack 3</a></td></tr>"
        s = s + "</table>"

and then to set up the style (which you only need to do once even if you update the panel's contents - probably in your UI initialisation script):

  s = " .statusattackbuttons { border-collapse: separate; border: 5px solid red; width: 100%; }"
  s = s + " .statusattackbuttons th {text-align: center; width: 100%; }"
  s = s + " .statusattackbuttons td {text-align: center; width: 100%; border: 1px solid red; cursor:pointer; color: blue; }"
  JS.eval("$('<style>').text('"+s+"').appendTo('head');")

(using <th> for the table header and <td> for the other rows so that you can style them differently without needing an extra class; which is exactly what th is designed for)