Html列表的行为类似于动态列宽

Question

我正在使用带有自定义模板的bootstrap typeahead（angular）。 生成下拉列表的方法是创建一个列表（ul / li）。我在列表的每个li中有三个值，我希望它们显示为一个表，其中中间列的宽度设置为最长值的大小。

因此，typeahead基本上会生成一个如下所示的列表：

<ul>
<li><a><span>something</span><span>Some long company name LLC</span><span></span>abc</a></li>
<li><a><span>something</span><span>Some really nice account</span><span>abcde</span></a></li>
<li><a><span>something</span><span>Third Account</span><span>abc</span></a></li>
<li><a><span>something</span><span>Fourth Account</span><span>abc</span></a></li>

我有这个CSS使它表现得像一个表：

ul .dropdown-menu {
   display: table;
   table-layout:fixed;
   width: 100%;
}

ul li a {
   display: table-row;
}

ul li a span{
   display: table-cell;
   width: auto;
   padding: 0px 9px 0px 0px;
}

结果如下： 你可以看到有三列。我希望中间列是宽度作为最长值（在这种情况下是一些长公司名称LLC），以便最右边列中的值全部对齐。我怎样才能做到这一点？我不想设置固定的列大小，因为这些值来自数据库，并且长度会有很大差异。

提前感谢您的帮助。