在flex中设置相等的宽度，但与其他子项不同

Question

我想做的是，像table一样创建一个视图，但是用div做一个视图，使用flex和calc()使两个之间的宽度相等行，但第一行应具有不同的宽度（大于其他宽度），为此我使用了100%/1，它在为空但在有内容时就可以工作了。参见以下示例：

.tr {
    display: flex;
}

.tr .th,.tr .td {
    width: calc(100%/5);
    border: 1px solid blue;
}

.tr .th:first-child, .tr .td:first-child {
    width: calc(100%/1);
    border: 1px solid red;
}

<div class="tr">
  <div class="th">T</div>
  <div class="th">T</div>
  <div class="th">T</div>
  <div class="th">T</div>
  <div class="th">T</div>
</div>

<div class="tr">
  <div class="td">Bdddddddddddddddd    22323 23 </div>
  <div class="td">Bdddddd</div>
  <div class="td">Bdddddddddddd</div>
  <div class="td">Bdd</div>
  <div class="td">Bdddddddddddddd asd</div>
</div>

我想为所有行设置相等的width，但第一行应具有相等的宽度，但比其他行更长。在上面的示例中，您看到的行不相等。