Automatic table wrap (in markdown)

Third party integrations
1

Hi all,
I have made my custom integration into the HA, using markdown element to display the following table:

    <table><tr>
    <td align="center">00:00</td>
    <td align="center">08:45</td>
    <td align="center">09:45</td>
    <td align="center">12:30</td>
    <td align="center">13:30</td>
    <td align="center">17:30</td>
    <td align="center">18:30</td>
    <td align="center"><font color=#3D8C40><b>20:30</b></font></td>
    <td align="center">21:30</td>
    </tr>
    <tr>
    <td align="center"><font color=#3D8C40><ha-icon icon=mdi:chevron-down-circle-outline></ha-icon></font></td>
    <td align="center"><font color=#C3362B><ha-icon icon=mdi:chevron-up-circle></ha-icon></font></td>
    <td align="center"><font color=#3D8C40><ha-icon icon=mdi:chevron-down-circle-outline></ha-icon></font></td>
    <td align="center"><font color=#C3362B><ha-icon icon=mdi:chevron-up-circle></ha-icon></font></td>
    <td align="center"><font color=#3D8C40><ha-icon icon=mdi:chevron-down-circle-outline></ha-icon></font></td>
    <td align="center"><font color=#C3362B><ha-icon icon=mdi:chevron-up-circle></ha-icon></font></td>
    <td align="center"><font color=#3D8C40><ha-icon icon=mdi:chevron-down-circle-outline></ha-icon></font></td>
    <td align="center"><font color=#C3362B><ha-icon icon=mdi:chevron-up-circle></ha-icon></font></td>
    <td align="center"><font color=#3D8C40><ha-icon icon=mdi:chevron-down-circle-outline></ha-icon></font></td>
    </tr>
    <tr>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
    <td align="center">0 hod 32 min</td>
    <td/>
    </tr></table>

It looks like on the first picture. So far so good.
The problem is on small display, where it looks like on the second picture.

How to avoid the issue? Is there a way of splitting the table somewhere (in the middle, for example), showing 6 lines instead on 3, on small display? I am not familiar with CSS, so detailed help is very welcomed.
Or is there a better component to be used?

Thank you very much,
Dan

Screenshot_1
Screenshot_2

2

Hello,
just for the record. I have tried card-mod with some success.
I have added the attribute “class” to each item in the table. The attribute holds the “priority” of the visibility:

content: >-
  <table>
  <tr>
  <td align="center" class="1">00:00</td>
  <td align="center" class="1">06:20</td>
  <td align="center" class="0"><font color=#3D8C40><b>15:00</b></font></td>
  <td align="center" class="1">07:20</td>
  <td align="center" class="1">08:55</td>
  <td align="center" class="2">09:55</td>
  <td align="center" class="2">14:00</td>
  <td align="center" class="2">20:00</td>
  <td align="center" class="2">21:00</td>
  </tr><tr>
  <td align="center" class="1"><font color=#3D8C40><ha-icon icon=mdi:chevron-down-circle-outline></ha-icon></font></td>
  <td align="center" class="1"><font color=#C3362B><ha-icon icon=mdi:chevron-up-circle></ha-icon></font></td>
  <td align="center" class="0"><font color=#3D8C40><ha-icon icon=mdi:chevron-down-circle-outline></ha-icon></font></td>
  <td align="center" class="1"><font color=#C3362B><ha-icon icon=mdi:chevron-up-circle></ha-icon></font></td>
  <td align="center" class="1"><font color=#3D8C40><ha-icon icon=mdi:chevron-down-circle-outline></ha-icon></font></td>
  <td align="center" class="2"><font color=#C3362B><ha-icon icon=mdi:chevron-up-circle></ha-icon></font></td>
  <td align="center" class="2"><font color=#3D8C40><ha-icon icon=mdi:chevron-down-circle-outline></ha-icon></font></td>
  <td align="center" class="2"><font color=#C3362B><ha-icon icon=mdi:chevron-up-circle></ha-icon></font></td>
  <td align="center" class="2"><font color=#3D8C40><ha-icon icon=mdi:chevron-down-circle-outline></ha-icon></font></td>
  </tr><tr>
  <td class="1"/>
  <td class="1"/>
  <td class="0" align="center">1 hod 17 min</td>
  <td class="1"/>
  <td class="1"/>
  <td class="2"/>
  <td class="2"/>
  <td class="2"/>
  <td class="2"/>
  </tr></table>

And then I have added card_mod which I expected should change background color for all columns with class==1 (hiding will be trivial then):

card_mod:
  style:
    ha-markdown $: |
      @media screen and (max-width: 1900px) {
        td[class="1"] {
          background: red;
        }      
      }

Unfortunately, it did not work.
However, using other styling did work:

card_mod:
  style:
    ha-markdown $: |
      @media only screen and (max-width: 1600px) {
        td {
          background: blue;
        }      
      }
      @media only screen and (max-width: 1900px) {
        td:nth-child(1) {
          background: red;
        }      
      }

So I think that the problem is in td[class="1"] condition.

Does anyone have an idea what may be wrong?
Thank you very much.