先空后值的表。为什么？

Question

我的表在值之前先空着td，为什么？为什么我的html是。

<div class="observations">
    <div class="sessao_conteudo">
            <table class="obs-tabela">
                <caption class="obs-caption"><strong>Observations</strong></caption>
                <td class="obs-tab-thead">
                    {{props obs}} {{if key
                    <=0 }} {{props prop}} <br>{{>key}}:               
                    {{/props}} {{/if}} {{/props}}
                </td>
                <td>
                    {{for obs}} 
                    <td class="obs-tab-td">
                        {{props}}
                        <br>
                            {{>prop}} 
                        {{/props}}
                    </td>
                    {{/for}}
                </td>
            </table>
         </div>

</div>

如果运行表格：

在这里输入图片描述

Answer 1

我的CSS是： ..:

.observations{
    float: left;
    display: flex;
    width: 45%;
    padding: 10px 1% 0px 4px;
}
.obs-caption {
    display: table-caption;
    text-align: center;
    background-color: #DCDCDC;
}
.obs-tabela{
    font-size: 16px;
    border: 1;
}
.obs-tab-thead{
    text-align: left;
    width: 109px;
    border: 1px solid black;
}
.obs-tab-td{
    text-align: left;
    border: 1px solid black;
}