element-ui table表格 tr间距\行间距设置

看客随心2026-03-27 10:22

效果图

代码实现

html 复制代码

<el-table :data="testData" :header-cell-style="{
            color: '#65AEC8 !important',
            height: '20px !important',
            padding: '0 0 4px 0 !important',
            borderBottom: '2px solid #4A7EC6 !important',
            background: 'transparent !important',
          }" 
          :cell-style="{
            padding: '0 !important',
            borderBottom: '2px solid transparent !important', /* 透明边框模拟间距 */
            backgroundClip: 'padding-box', /* 确保背景不延伸到边框 */
            backgroundColor: '#031c50 !important',
          }" stripe class="log-table">
            <el-table-column label="规格型号" align="center" prop="规格型号"></el-table-column>
            <el-table-column label="板类型" align="center" prop="板类型"></el-table-column>
            <el-table-column label="流水号" align="center" prop="流水号"></el-table-column>
            <el-table-column label="库区" align="center" prop="库区"></el-table-column>
            <el-table-column label="库位" align="center" prop="库位"></el-table-column>
            <el-table-column label="存取操作" align="center" prop="存取操作"></el-table-column>
            <el-table-column label="存取时间" width="200" align="center" prop="存取时间"></el-table-column>
</el-table>

重点说明

这两行基本就能实现tr之间的透明间距

html 复制代码

borderBottom: '2px solid transparent !important', /* 透明边框模拟间距 */
backgroundClip: 'padding-box', /* 确保背景不延伸到边框 */

如果想要th\tr之间都有间距可以给table设置如下样式

html 复制代码

table {
  border-collapse: separate; /* 必须是 separate */
  border-spacing: 0 10px; /* 水平 垂直间距 */
}

注：backgroundColor: '#031c50 !important',这个千万不要写成background: '#031c50 !important',差别很大卡了我半天