创建具有固定左右列的 HTML 表格答案

【问题标题】：Create an HTML table with fixed left and right column创建具有固定左右列的 HTML 表格
【发布时间】：2014-09-17 20:22:39
【问题描述】：

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

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

任何帮助将不胜感激。

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

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

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

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

【问题讨论】：

对标题行中的列使用min-width css 属性。
@Kami 我现在为第一列和最后一列应用了设置宽度。但是中间的列现在被挤在一起了，这不是很好的可用性/可读性。我想要一些水平溢出以允许用户滚动/滑动任何特定行的日期
无法直接使用 CSS 来修复两列，同时滚动其余列。您可以通过嵌入在中心水平滚动的表格来实现效果。

【解决方案1】：

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

【讨论】：

如果您查看示例并执行硬刷新 (shift + f5) 以获取新的 CSS，您会看到所有列之间的列都被压扁了，这不是很好的可用性/可读性！好的开始！
您还可以在其间的列中添加一个 min-witdh，这样它们就不会被压扁并且始终可以读取到某个点
是的，我确实使用 nth-child 做到了这一点。我设置了一个最小宽度，虽然它确实有效，但它只能在屏幕宽度约为 700 像素时才有效。到那时桌子爆了，你只能看到桌子的一半。