创建一个左右列固定的HTML表

Create an HTML table with fixed left and right column

本文关键字:HTML 左右 一个 创建      更新时间:2023-09-26

目前处于困境。我为我的一个客户建立了一个预订系统,没有机会很快做出响应。上个星期很快就到了。我认为我构建代码的方式是可以响应的。我想在移动/表格中实现的是让最左边和最右边的列保持固定,并让中间的所有列滚动/滑动。我有一个开发链接,你可以查看:

示例

你可以从这个例子中看到,最左边的一列是关于预订的信息,最右边是继续按钮。这些柱子必须保持固定。有没有办法只使用CSS来实现这一点?我有很多javascript代码按原样运行,我想在使用它之前探索所有选项

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

编辑到目前为止,我已经使用为第一列和最后一列添加了一个设置宽度

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

这是一个很好的开始。但是位于第一个和最后一个之间的列在响应方面变得笨拙,这不是很好的可用性/可读性。我想实现某种水平溢出,允许用户在手机/平板电脑上滚动/滑动

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