Help with markdown card with table in it

Configuration Frontend
1

Hello,

having hard time configuring markdown card. I need time to display on left and temperature on right but temperature stuck to left.

image
image1103×110 8.68 KB 

                  - type: markdown
                    style:
                      .: |
                        ha-card {
                          border-radius: 20px;
                          overflow: hidden;
                          margin: 0 auto;
                          padding-top: 0px;
                          background: none;
                          box-shadow: none;
                        }
                      ha-markdown:
                        $: |
                          td, th {
                            word-wrap: break-word;
                            border-spacing: 0px;
                                margin-left:auto; 
                                margin-right:auto;

                          }
                          table {
                            border-spacing: 0px;
                                margin-left:auto; 
                                margin-right:auto;
                          }
                    content: >
                      |<font
                      size=5>{{now().strftime("%I:%M %p")}}</font><br><font
                      size=3> {{now().strftime("%A")}}, {{now().strftime("%d
                      %B")}} </font> |<font size=6>{{state_attr("weather.forecast", "temperature")}}°C</font><br><font size=4>{{states.weather.forecast.state}}
                      </font> |

                      |:--|---------:|

                      || |
2

Markdown does not support table column widths. There are some workarounds here: Set table column width via Markdown - Stack Overflow

Probably the best way would be with blank image tags set to a percentage of the width (3rd answer in the link above, but with percent rather than fixed widths), so:

|Name|Value|
|----|---------|
|<img width='50%'/>|<img width='50%'>|

Untested.

3

Thanks for your reply with suggestion.

I ended up changing the model the way content display in markdown card.

image
image1045×124 14.3 KB

see below my new code

                  - type: markdown
                    style:
                      .: |
                        ha-markdown.no-header {
                          padding-top: 0px !important; 
                          }
                        ha-markdown {
                          padding: 0px 0px 0px !important; 
                          }
                        ha-card {
                          border-radius: 20px;
                          overflow: hidden;
                          margin: 0 auto;

                          background: none;
                          box-shadow: none;

                        }
                      ha-markdown:
                        $: |
                          td, th {
                            word-wrap: break-word;
                            border-spacing: 0px;
                            
                                margin-left:auto; 
                                margin-right:auto;

                          }
                          table {
                            border-spacing: 0px;
                                margin-left:auto; 
                                margin-right:auto;
                          }
                    content: >-
                      <table >
                        <tr>
                          <td width="10%" ><img src="/local/tileboard/images/HA2.png" alt="" border=3 height=90 width=100 ></img></td>
                          <td width="85%"><font size=5><b>{{now().strftime("%I:%M %p")}}</b></font><br><font size=3> {{now().strftime("%A")}}, {{now().strftime("%d %B")}} </font></td>
                          <td><font size=6><b>{{state_attr("weather.forecast", "temperature")}}°C</b></font><br><font size=4>{{states.weather.forecast.state}}  </font></td>
                        </tr>
                      </table>
1 Like