Using markdown card with HTML to display borders between rows

Hello good people
I am trying to display in markdown card with HTML rows of data from an entity , where each attribute of the entity is in separate row. In my case the entity represent s the state of my EDiMax AP routers, where each SSID is in separate row.
Per chatgpt, i used HTML tr/td encoding with borders
however it does seems to have an effect, no borders are displayed. Also tried to add coloring to the columns of the table per their content that didnt work either

so maybe chatgpt wrong or i misunderstood something basic?

here is example of the markdown card, iit supposed to display 5 columns per row,each row represents different router SSID

<table style="width:100%; border-collapse: collapse;">
  <tr>
    <th style="width:20%; border: 1px solid black; padding: 8px; text-align: left;">SSID</th>
    <th style="width:20%; border: 1px solid black; padding: 8px; text-align: left;">IP</th>
    <th style="width:20%; border: 1px solid black; padding: 8px; text-align: left;">Mac</th>
    <th style="width:20%; border: 1px solid black; padding: 8px; text-align: left;">Uptime</th>
    <th style="width:20%; border: 1px solid black; padding: 8px; text-align: left;">Last_Update</th>
  </tr>
  <!-- Double separator after header row -->
  <tr>
    <td colspan="5" style="border-bottom: 3px double black;"></td>
  </tr>
  {% set SENSOR = 'input_text.edimax_all_routers_status' -%}
  {% for attr, value in states[SENSOR].attributes.items() %}
    {% if attr.startswith('KEDEM') %}
      {% set ssid = attr | trim %}
      {% set ip = value.split(',')[0] | trim %}
      {% set mac_addr = value.split(',')[1] | trim %}
      {% set uptime = value.split(',')[2] | trim %}
      {% set update_time = value.split(',')[3] | trim %}
  <tr>
    <td style="width:20%; border: 1px solid black; padding: 8px; background-color: {{ 'red' if mac_addr == 'ERROR' else 'transparent' }}; color: {{ 'white' if mac_addr == 'ERROR' else 'black' }};">{{ ssid }}</td>
    <td style="width:20%; border: 1px solid black; padding: 8px;">{{ ip }}</td>
    <td style="width:20%; border: 1px solid black; padding: 8px;">{{ mac_addr }}</td>
    <td style="width:20%; border: 1px solid black; padding: 8px;">{{ uptime }}</td>
    <td style="width:20%; border: 1px solid black; padding: 8px;">{{ update_time }}</td>
  </tr>
  <!-- Single separator between data rows -->
  <tr>
    <td colspan="5" style="border-bottom: 1px solid black;"></td>
  </tr>
    {% endif %}
  {%- endfor %}
</table>

here is an example output (I use more columns ) - no border lines, and routers in ERROR state that are supposed to be red are still shown in same white color fonts

markdown_card_output

How do you know there are no black borders on a black background?

its also on white background
and also the red marking in case of ERROR in context does not work in either background

image