Html 挤压表格，使其响应css

我想让我的表对我正在使用的应用程序做出响应。我尝试过所有不同的方法，比如让它随着窗口大小的减小而滚动。但我想有一个方法，桌子挤压或挤压，以适应窗户的大小。请找到我的密码。希望我能尽快找到答案

.buttonListContainer{
位置：固定；
最高：8.2%；
}
.buttonlistcontext{
位置：固定；
边框：0.1px实心#ddd；
页边顶部：1px；
背景色：透明；
保证金：0；
填充：0；
排名：0；
左：0；
}

事件计数：
重置
速度：x
1.
5.
10
50
100
200
墙面颜色：
银灰色
薄荷绿
香草奶油
水蓝色
敏感：
蒙太奇：
共同海损
CII
双极的
线光标
集锦
时间间隔：
5秒
10秒
20秒
预注释

您可以考虑添加到项目中。这可以为您节省大量的时间和精力。非常适合编写响应性强的代码

如果添加了引导，只需执行以下操作即可在移动设备上实现桌面效果：

<div class="table-responsive">
    <table class="table">
        ....
    <table>
</div>

....

这将为您提供一个移动设备上的可滚动表格。如果不想使用引导路径，可以使用上面的HTML尝试以下操作：

<style>

@media screen and (max-width: 767px){
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
    }
}

.table-responsive {
    min-height: .01%;
    overflow-x: auto;
}

.table{
    width: 100%;
    max-width: 100%;
}

</style>

@媒体屏幕和屏幕（最大宽度：767px）{
.表格响应{
宽度：100%；
边缘底部：15px；
溢出y：隐藏；
-ms溢出样式：-ms自动隐藏滚动条；
边框：1px实心#ddd；
}
}
.表格响应{
最小高度：.01%；
溢出-x：自动；
}
.桌子{
宽度：100%；
最大宽度：100%；
}

这应该能奏效。看看这个

---

但是，请仔细看看如何添加引导功能。

好吧，要使它具有响应性，您需要进行重大的重新设计、使用或其他操作

但你仍然可以拥有一张反应灵敏的桌子。将以下代码添加到CSS中，应该可以工作：

table {
    display: block;
}
tr {
    display: block;
}
td {
    display: inline-block;
}

如果您不喜欢它的外观，但仍然希望维护桌面的表格布局，并使其对移动设备具有响应性，那么这里还有另一个窍门。对于桌面，您具有正常的表格布局，对于窗口宽度小于900像素的手机和桌面，它将垂直堆叠：

@media (max-width: 900px) {
    table {
        display: block;
    }
    tr {
        display: block;
    }
    td {
        display: block;
    }
}

编辑：对于“挤压”效果，您可以这样做：

@media (max-width: 900px) {
    table {
        display: block;
    }
    tr {
        display: block;
    }
    td {
        display: inline-block;
        width: 32%;/* to have 3 columns */
    }
}

编辑2:这里是一个使用上次编辑的示例。需要注意的两件事：

新增

框尺寸：边框框至“td”

由于我们使用的是“display:inline block；”，为了使内联块按需要工作，“td”之间的所有空格都必须删除。下面是一个例子：

这：

第1单元
细胞2

应改为：

<td>
    cell1
</td><td>
    cell2
</td>

第1单元
细胞2

有了一张桌子，你会受到严重阻碍，所以有一些一般的提示。。。1） 为了布局而去掉表格。2） 为了布局而去掉表格。3） 将过时的

font

标记替换为更现代、更具语义的标记<代码>标签4）查看

字段集

是否适合您的任何地方。5） 查看使用

div对控件/标签对进行分组是否有意义。6） 查看
flex-box
和其他选项。7）研究媒体查询如何提高响应性。我将考虑添加引导程序。但是上面的样式没有起作用@prb_123似乎有效。对于任何小于767px的屏幕宽度，它都会垂直滚动。我加了一个砰的一声。嗨，我试过你的设计。它的工作原理如图所示。但我只想让它像压扁桌子一样工作。如下面的文章所示，好的，我理解。默认情况下，它应该会挤压。给你的桌子一个100%的宽度，用百分比而不是像素来处理你的宽度。酷，这是可行的。但我必须把头伸出来调整位置。有没有一种简单的方法可以在不知道容器宽度的情况下将像素设置为百分比？！！我们可以根据文章中显示的屏幕大小挤压表格吗？上面的设计工作得很好，但是当屏幕大小减小时，所有列都倾向于在页面上的其他框架上出现下一行重叠。因此，理想情况下，我希望桌子随着宽度的减小而收缩或挤压。@prb_123更新了我的答案是的，谢谢。我也试过了。不过，默认情况下，它不会挤压。所有列项目在每个项目下各有一个。早期的解决方案看起来更好。当我说“squish”css-tricks.com/accessible-simple-responsive时，请参阅文章-tables@prb_cm“挤压”是指3列，对吗？更新我的答案，看编辑2。
<td>
    cell1
</td><td>
    cell2
</td>