找了很久的问题，一个样式就解决了

我的布局是一个table，总共三列，两头列固定宽度，中间列自适应宽度。中间列如果超出宽度部分的内容则用...代替。

最终效果图：

效果图

试了很多种方式都不行，后来找同事帮忙看，就用了一个样式搞定，它就是

table-layout:fixed（在table的style中设置）

另外门店名称超出宽度部分用...代替，那div要设置一个宽度，才会有...的效果。但是这一列的宽度又是自适应的，所以这个宽度要怎么设置呢？原来是width:calc(100%)

最终的源码分享出来, 希望对大家有帮助！

```

<table class="layui-table" lay-even lay-skin="nob" style="border-spacing:0 9px;margin-top: -15px;table-layout:fixed">

  <thead>

    <tr>

      <th width="60">[[#{lbl.store.stId}]]</th>

      <th>[[#{lbl.store.storeName}]]</th>

      <th width="107">[[#{lbl.so.order.no}]]</th>

    </tr>

  </thead>

  <tbody>

    <tr th:each="order:${pendingOrderData}">

      <td>[[${order.stId}]]</td>

      <td th:title="${order.stName}"><div style="width:calc(100%)" class="layui-nav-more ellipsis">[[${order.stName}]]</div></td>

      <td><a th:href="|javascript:viewDetail('${order.oid}','so');|">[[${order.orderNo}]]</a></td>

    </tr>

    <tr>

      <td colspan="3" style="text-align:center;font-size:20px;font-weight:bold;padding:5px;background-color:white!important;">

      <a th:href="|javascript:viewDetail('','solist');|" style="display: flex;justify-content: center;margin-top: 4px;">

      <div class="blackcircle"></div><div class="blackcircle"></div><div class="blackcircle"></div></a></td>

    </tr>

  </tbody>

</table>

```