layui 设置table 行的高度方法

下面是关于“layui 设置table 行的高度方法”的完整攻略：

一、给表格的样式加上 ID 或 class

首先给需要设置行高的表格加上一个 ID 或 class，示例代码如下：

<table id="mytable" class="layui-table">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>小红</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

二、使用 CSS 设置行高

接下来我们使用 CSS 来设置表格行高，默认情况下，每一行都有一定的高度，如果需要设置行高，只需要通过设置 tr 元素的 height 属性即可，示例代码如下：

#mytable tbody tr {
    height: 50px;
}

上面的代码中，我们通过 #mytable 指定了需要设置行高的表格，通过 tbody tr 指定了需要设置行高的 tr 元素，最后通过 height 设置了行高为 50px。

如果需要给表头设置行高，只需要使用 thead tr，代码如下：

#mytable thead tr {
    height: 60px;
}

三、示例说明

我们来看一个完整的示例，在一个表格中，第一行是表头，后面的行都是数据行，我们需要给数据行设置行高为 50px，给表头设置行高为 60px，示例代码如下：

<table id="mytable" class="layui-table">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>小红</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

#mytable tbody tr {
    height: 50px;
}

#mytable thead tr {
    height: 60px;
}

运行上面的代码后，表格的数据行高为 50px，表头的行高为 60px。

另外一个示例是在一个页面中有多个表格，每个表格的行高并不相同，示例代码如下：

<table id="table1" class="layui-table">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>小红</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

<table id="table2" class="layui-table">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>小红</td>
            <td>20</td>
        </tr>
        <tr>
            <td>3</td>
            <td>小张</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

#table1 tbody tr {
    height: 50px;
}

#table2 tbody tr {
    height: 60px;
}

上面的代码中，我们为两个表格分别设置了不同的行高，其中 table1 的行高为 50px，table2 的行高为 60px。

希望以上的攻略能够帮到你，如有不明白的地方，欢迎继续提问。