display：table-row在ul和div上的工作方式不一样

Question

我有一个标记，它由一个外部div（我用display：table设置），一个ul和另一个div（都有display：table-row）组成。当ul组件内的元素正常工作并填充整行时，第二个div的宽度似乎等于其容器，其中的元素在第一个表格单元格处停止。这是一个最小的标记示例：

<div class="tab">
<ul class="tabr">
<li class="tabd">1</li>
<li class="tabd">2</li>
<li class="tabd">3</li>
</ul>
<div class="tabr">
<span class="tabd">4</span>
</div>
</div>

和相对的css：

.tab {
  display: table;
  width: 100%;
}
.tabr {
  display:table-row;
  width: 100%;
}
.tabd {
  display:table-cell;
  float: none;
  border: 1px solid black;
}

这里有一个jsfiddle显示正在发生的事情：https://jsfiddle.net/q00gppo4/

flexbox不是一个选项，因为我需要支持IE9 +，我不认为我可以用标记玩那么多，因为它是自动生成的（来自primefaces tabView）