Css 显示为表的Div标记未按预期工作

我正在做一个布局，它有多个表格，我试图把它们放在一个比直接放在页面上更容易阅读的格式中。我每行需要不同大小的单元格，所以我使用div标记，但我还需要div标记中的表格垂直对齐，所以我使用display:table cell样式

我遇到的问题是，第一个“表行”的操作与我希望的完全一样，但第二个表行只是将左侧的所有内容粉碎在一起。我已经做了一个快速的JSFiddle来展示我在说什么。我错过了什么？或者我做错了什么

HTML:

<div class="TR">
    <div class="TD" style="width:40%;">
    Info
    </div>

    <div class="TD" style="width:20%;">
    Some info
    </div>

    <div class="TD" style="width:40%;">
    More info
    </div>
    </div>
    <br />

    <div class="TR">
    <div class="TD" style="width:50%;">
    Info 1
    </div>

    <div class="TD" style="width:50%;">
    Info 2
    </div>
</div>
<br />

div.TR {
    background-color:blue;
    display: table-row;
}
div.TD {
    background-color:red;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid black;
}

---

问题是您的表行[sic]和单元格没有引用点。通常，他们会依赖父

表
来定义自己的位置

要使
TD
s按预期运行，请将
TR
s的整个块包装在另一个
div
中，使用一个
表类
，并使用以下命令：

.TABLE {
    display: table;
}

HTML:


信息
一些信息
更多信息
信息1
信息2

这里有一个

然而，应该说，这种布局方法只适用于边缘情况。有很多更简洁的方法可以实现灵活的布局（应该避免像瘟疫一样使用内联样式）。
为什么要重新发明轮子？使用
table
如果是表格数据，预期结果是什么？table的问题是不能有不同大小的表格数据单元格，我试图阻止为每一行创建新表格。页面中的每一行都有不同数量的列，但我需要它们分布在整个页面上。尽管在你的小提琴中，它现在改变了我在第1行的数据单元的大小。这就是我遇到的问题。我唯一能想到的另一件事是取消div标记，并为每一行创建一个包含表。我只是不想在页面上堆满大量的表标签。这就是表的行为。宽度最大的
td
定义了列中所有其他
td
s的宽度如果希望它们是不同的，只需使用具有百分比宽度的常规内联块div（或为第二个容器块定义另一个表包装器），我会这样做。我试着不让PHP被一堆表标记弄得乱七八糟，但似乎我越是走这条路，我就越是被div标记和样式弄得乱七八糟。谢谢你的帮助，不用担心。祝你好运
<div class="TABLE">
    <div class="TR">
        <div class="TD" style="width:40%;height:300px;">Info</div>
        <div class="TD" style="width:20%;height:300px;">Some info</div>
        <div class="TD" style="width:40%;height:300px;">More info</div>
    </div>
    <div class="TR">
        <div class="TD" style="width:50%;height:300px;">Info 1</div>
        <div class="TD" style="width:50%;height:300px;">Info 2</div>
    </div>
</div>