饿了吗组件中怎么使表格组件 的最后一列随滑动条宽度减少而减少
可以使用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 著作权归作者所有。请勿转载和采集!