html table 自适应高度

要让 HTML 表格自适应高度，可以使用 CSS 中的 `height` 属性来实现。具体步骤如下：

1. 设置表格容器的高度为 `100%` 或者使用绝对定位来使其充满父容器。

.table-container {
  position: absolute; /* 如果使用绝对定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 或者使用绝对定位 */
}

2. 设置表格的高度为 `100%`。

table {
  height: 100%;
}

3. 针对表格中的行元素设置高度为百分比。

tr {
  height: 10%; /* 例如这里设置每一行的高度为 10% */
}

这样，在父容器大小变化时，表格和表格中的行元素都会自适应高度，达到预期效果。

相关问题

el-table自适应高度

要实现el-table的自适应高度，可以按照以下步骤进行操作：
1. 在el-table中动态绑定一个高度，并在data中声明tableHeight。

<el-table ref="multipleTable" :data="tablist" style="width: 100%" v-if="tableHeight" :height="tableHeight"></el-table>

data() {
  return {
    tableHeight: "",//表格高度
  }
}

2. 声明一个方法来计算el-table的高度。

methods: {
  //计算table高度(动态设置table高度)
  getTableHeight() {
    let tableH = 210; //距离页面下方的高度
    let tableHeightDetil = window.innerHeight - tableH;
    if (tableHeightDetil <= 300) {
      this.tableHeight = 300;
    } else {
      this.tableHeight = window.innerHeight - tableH;
    }
  },
}

3. 在mounted钩子函数中，通过计算窗口高度、表格距离顶部距离和需求高度来设置tableHeight，并更新表格防止内容变化引起异常情况。同时，监听窗口大小变化，实时更新tableHeight。

mounted() {
  let that = this;
  this.$nextTick(() => {
    this.tableHeight = window.innerHeight - this.$refs.table_e.$el.offsetTop - 200; //窗口高度-表格距离顶部距离-需求高度
    this.$refs.table_e.doLayout(); //更新表格防止表格内容变化表格异常情况
    //监听窗口大小变化
    window.onresize = function() {
      that.tableHeight = window.innerHeight - that.$refs.table_e.$el.offsetTop - 200;
      that.$refs.table_e.doLayout();
    };
  });
},

以上就是实现el-table自适应高度的方法。

html中table自适应屏幕高度

在 HTML 中，可以使用如下代码来实现表格自适应屏幕高度：

<style>
table {
  height: 100%;
  width: 100%;
  table-layout: fixed;
}
tbody {
  display: block;
  height: calc(100% - 1em);
  overflow-y: scroll;
}
</style>

<table>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
    <tr>
      <td>内容3</td>
      <td>内容4</td>
    </tr>
    <!-- 其他行省略 -->
  </tbody>
</table>

首先，我们使用 CSS 中的 `height` 和 `width` 属性将表格宽度和高度设置为 100%。接着，使用 `table-layout: fixed;` 属性来让表格根据容器自适应宽度。这样，表格的宽度就可以根据屏幕大小自动适应。

接下来，我们为表格中的 tbody 标签设置 `display: block;` 属性，使其可以像块级元素一样显示。然后，使用 `height: calc(100% - 1em);` 将 tbody 的高度设置为屏幕高度减去 1em 的高度（em 是相对于字体大小设置的单位，1em 等于当前字体大小的值），这样就可以使 tbody 的高度自适应屏幕。最后，使用 `overflow-y: scroll;` 将 tbody 设置为纵向滚动。

这样，就可以实现表格自适应屏幕高度的效果。如果需要表格自动调整高度，请将tbody属性的overflow-y:scroll改为overflow-y: auto。