当前位置：首页 > news >正文

＜table＞内有两行＜tr＞，第一行设定高度为60，剩余第二行，和右侧元素高度补齐。

news 来源：原创 2025/5/16 6:25:36

实现 <table> 内第一行高度设定为 60px，第二行和右侧元素高度补齐的效果，你可以通过 CSS 样式来控制。示例：

为第一行 <tr> 设置固定高度 60px。
对于右侧元素，假设它是一个 <div> 或者其他容器，将其与表格第二行通过布局关联起来，使用 Flexbox 或 Grid 布局让它们高度自动匹配。这里假设右侧元素和表格在一个 <el-row> 中，借助 Flexbox 布局实现高度匹配。

<template>
  <!-- ... existing code ... -->
  <el-row :gutter="20" style="display: flex; align-items: stretch;">
    <el-col :span="12">
      <div class="table">
        <div class="table_title">重要社会关系asdfasdfasdf</div>
        <div class="table_subtitle">
          <div class="table_class">1.bktt</div>
          <div class="cus_label">
            <span>无此类情况</span>
            <span class="cus_label_box">
              <span class="cur_label_box_icon">对号</span>
            </span>
          </div>
        </div>

        <div class="table_cont">
          <table style="width:1024px;border:solid 1px #000">
            <tbody>
              <tr style="height: 60px;"> <!-- 第一行设置高度为 60px -->
                <td>姓名</td>
                <td>工作单位</td>
                <td>现职</td>
              </tr>
              <tr>
                <td>张三</td>
                <td @click="editCell($event, 0, 1)">
                  <span v-if="!editingCells[0][1]">{{ tableData[0].workUnit }}</span>
                  <input
                    v-else
                    v-model="tableData[0].workUnit"
                    ref="inputRefs[0][1]"
                    @keydown.enter="onEnter($event, 0, 1)"
                    @keydown.tab="onTab($event, 0, 1)"
                    style="border: none; outline: none; width: 100%;"
                  />
                </td>
                <td>经理</td>
              </tr>
              <tr>
                <td>李四</td>
                <td>YY 机构</td>
                <td>职员</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </el-col>
    <el-col :span="12">
      <!-- 右侧元素 -->
      <div style="background-color: #f0f0f0; padding: 10px;">
        <!-- 这里可以放置右侧的具体内容 -->
        <el-radio v-model="radio" label="1">备选项</el-radio>
        <el-radio v-model="radio" label="2">备选项</el-radio>
      </div>
    </el-col>
  </el-row>
  <!-- ... existing code ... -->
</template>

<script setup>
// ... existing code ...
</script>

<style scoped>
.table_cont table {
  height: 100%; /* 确保表格高度占满父容器 */
}

.table_cont table tr {
  box-sizing: border-box;
}
</style>

第二行，设置高度为100%即可。