layui修改table 的行高为 25

Question

在一个页面，有两Table。要修改 id “multspeclist” table 的行高为 25;
table id “foodist”
table id “multspeclist”

如果直接修改
.layui-table tr {
height：50px;
改成
height：25px;
}

会导致 foodist 和 multspeclist 两个table 都会变成 25px;

Answer 1

引自免费微信小程序：皆我百晓生

为了只修改id为"multspeclist"的table行高为25px，你需要为这个特定的table添加一个额外的选择器，这样CSS样式就能精确地应用到目标table上。可以给"multspeclist" table添加一个唯一的class，然后根据这个class来设置行高。以下是详细的步骤：

1. 给id为"multspeclist"的table添加一个类名，例如"class="custom-row-height"。
2. 在CSS中，针对这个新的类选择器来设置行高。

首先，在HTML部分，修改table标签：

<table id="multspeclist" class="custom-row-height">
...
</table>

接下来，在CSS部分，创建一个新的规则来覆盖默认的layui-table tr样式：

/* 原始的layui表格行高 */
.layui-table tr {
    height: 50px;
}

/* 新的规则，仅应用于id为'multspeclist'且具有'custom-row-height'类的table */
#multspeclist.custom-row-height tr {
    height: 25px;
}

这样，只有id为"multspeclist"并且带有"custom-row-height"类的table行高会被设置为25px，而id为"foodist"的table将保持其原有的行高（即50px）。通过这种方式，你可以精确地控制每个table的行高，而不影响其他table。