display:table-row not working the same way on ul and div

Question

I have a markup that's composed of an external div (which I set with display:table), a ul and another div (both have display:table-row). while elements inside the ul component work properly and fill the entire row, and the second div seems have width equal to its container, elements inside it stop at the first table cell. here's a minimal markup example:

<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>

and the relative css:

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

and here's a jsfiddle showing what's happening: https://jsfiddle.net/q00gppo4/

flexbox is not an option, as I need to support IE9+, and I don't think I can play around that much with the markup either, since it's autogenerated (from a primefaces tabView)