javascript - 创建一个具有固定左右列的 HTML 表格

Question

此刻正在泡菜中。我为我的一个客户建立了一个预订系统，但没有机会很快做出回应。上周很快就会到来。我以为我以一种响应式的方式构建了我的代码。我想在移动/表格中实现的是让最左边和最右边的列保持固定，而中间的所有列都可以滚动/滑动。我有一个开发链接，您可以查看:

example

从示例中可以看出，最左边的列是有关预订的信息，最右边的列是继续按钮。这些是必须保持固定的列。有没有办法只用 CSS 来实现这个目标？我有很多 javascript 代码正在运行，我想在使用它之前探索所有选项。

如有任何帮助，我们将不胜感激。

编辑到目前为止，我已经使用

为第一列和最后一列添加了设置宽度

td:first-child
td:last-child{
    width:120px;
}

这是一个很好的开始。但是第一列和最后一列之间的列在响应中变得松软，这不是很好的可用性/可读性。我想实现某种水平溢出以允许用户在移动设备/平板电脑上滚动/滑动

Answer 1

在第一列和最后一列添加一个固定宽度的类或最小宽度(如果它可以大于但不小于指定值)