uView ui 1x uniapp 表格table行内容长度不一导致高度不统一而出现的不对齐问题

原创已于 2023-12-09 12:35:27 修改 · 2.5k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#view design #uni-app #javascript

于 2023-11-29 16:52:29 首次发布

博客主要围绕td单元格未对齐问题展开。因td单元格内内容长度不定，导致行单元格未对齐。解决办法是将td的高度从height:100%重置为height:auto!important，给出了相应代码示例，解决了该问题。

问题

因为td单元格内空长度不定导致行单元格未对齐

解决：

重置td的高度：height:100% 改为height:auto !import

<u-td style="height: auto !important;background-color: #bfc;">33</u-td>

  <u-table>
          <u-tr v-for="(item,index) in Lineinfo.Cust_Name" >
            <u-td style="height: auto !important;background-color: #bfc;">33</u-td>
            <u-td style="height: auto !important;background-color: #bfc;">{{ Lineinfo.plantime[index].split('T')[1] }}</u-td>
            <u-td style="height: auto !important;background-color: #bfc;">
              <u-button size="mini" :custom-style="btnCustStyle" :hair-line='false'>删除</u-button>
            </u-td>
          </u-tr>
        </u-table>