How to add borders to an html table on a widget?

[lrossy31]

Hello everyone,

I have made cloned and made changes to a widget (KB Categories) and changed it from a panel to a table and cannot get to add borders to this table.  Below is the code and image attached.  Will appreciate any assistance with this.

<table cellpadding="0" cellspacing="0" border="5" border-color="black" width="100%" class="wrapper">
  <br />
  <div style='top:0px;width:100%;background-color:#4f6f81;color:#f6f8f9;border-color:black;text-align:left;font-size:1.55em;'>&nbsp;&nbsp;Categories</div>


<!--<div class="panel panel-{{options.color}} b">
  <div class="panel-heading">
    <h4 class="panel-title">${Categories}</h4>
  </div>
  <div class="panel-body"> -->
 
    <div ng-repeat="a in data.categories | orderBy:'label'" class="m-b">
      <a href="?id=kb_category&kb_category={{::a.value}}">{{::a.label}}</a>
    </div>
</table>
 

[Alberto Consonn]

Hi lrossy31,

try simply using the folllwing border setting (as suggested here😞

border="1"

It should works!

Hope this will help you.

Please, remember to mark Correct or Helpful if you find my response useful.

Cheers
Alberto

[lrossy31]

Hello Alberto, 

Thanks for your replies.  I have tried this as you can see in this line:

<table cellpadding="0" cellspacing="0" border="5" border-color="black" width="100%" class="wrapper">

but the border is not showing.

[lrossy31]

Also tried it as suggested in the link but borders still not showing.

[Alberto Consonn]

Hi,

just did a quick test creating a new simple widget with a table, it works fine. Please, try to use the HTML / CSS as mentioned below:

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Test</td>
    <td>Test</td> 
    <td>50</td>
  </tr>
</table>

table {
    border: 5px solid black;
}

Here the result:

Hope this will help to fix your problem.

Please, remember to mark Correct or Helpful if you find my response useful.

Cheers
Alberto