可以使用CSS中的calc函数来实现最后一列随滑动条宽度减少而减少的效果。

首先,将表格组件的宽度设置为100%,这样它会自动适应父容器的宽度。

然后,使用calc函数来设置最后一列的宽度。假设最后一列的宽度为x,滑动条的宽度为y,那么最后一列的宽度可以设置为calc(100% - y)

以下是一个示例代码:

.table-container {
  width: 100%;
  overflow-x: auto;
}

.table {
  width: 100%;
  table-layout: fixed;
}

.table td:last-child {
  width: calc(100% - 20px); /* 假设滑动条的宽度为20px */
}

在上面的示例中,.table-container是包裹表格的容器,.table是表格本身,.table td:last-child选择器选择最后一列的单元格,通过calc函数来设置最后一列的宽度。

请根据实际情况调整代码中的类名和滑动条宽度。

饿了吗组件中怎么使表格组件 的最后一列随滑动条宽度减少而减少

原文地址: https://www.cveoy.top/t/topic/iHv3 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录