Markdown card reduce spacing in a table

Configuration Frontend
1

Hi everyone,

I am using this code in a markdown card, to display who is at home (colored profile picture) and who not (gray scale profile picture):

type: markdown
content: >-
  <table><tr>
	  <td width="150px"><center>{%if is_state('person.x_h','home')%}<img width="60" src="/local/pics/x_home.png">{%else%}<img width="60" src="/local/pics/x_away.png">{%endif%}</td>
	  <td width="150px"><center>{%if is_state('person.y', 'home')%}<img width="60" src="/local/pics/y_home.png">{%else%}<img width="60" src="/local/pics/y_away.png">{%endif%}</td>
	  <td width="150px"><center>{%if is_state('person.a_h', 'home')%}<img width="60" src="/local/pics/a_home.png">{%else%}<img width="60" src="/local/pics/a_away.png">{%endif%}</td> 
	  <td width="150px"><center>{%if is_state('person.b_h', 'home')%}<img width="60" src="/local/pics/b_home.png">{%else%}<img width="60" src="/local/pics/b_away.png">{%endif%}</td>
	  <td width="150px"><center>{%if is_state('person.c', 'home')%}<img width="60" src="/local/pics/c_home.png">{%else%}<img width="60" src="/local/pics/c_away.png">{%endif%} </td>
  </tr></table>

image

I am asking myself is there a way to reduce the vertical spacing of the picture to the border of the card itself.

When I use the markdown card only with text there is stil space, I know, but especially with the pictures the spacing below is larger then with the text:

image

Or is there a way to vertically align the pictures within the table?

Thx for any suggestions and help,
zavjah

1 Like
2

Hello!
Probably, my example will be useful to you:

      type: markdown
      content: Test
      card_mod:
        style: |
          ha-card {
            background: rgba(0,0,0,0); /* background hide */
            border-style: none;
            }
          ha-markdown
            {
            padding: 0px !important;  /* remove extraspaces around content */
            }