HTML表格浮动标题，不使用固定高度和溢出-y_Html_Css_Html Table

HTML表格浮动标题，不使用固定高度和溢出-y

html css

HTML表格浮动标题，不使用固定高度和溢出-y,html,css,html-table,Html,Css,Html Table,我看到的所有关于table和fixed header的示例都使用css t车身{ 高度：120px；溢出y：自动； } 这将创建双垂直滚动条。一个来自浏览器本身，另一个来自表。如果一个页面只有一个宽度为100%的表格，那么这个双滚动条非常难看而且没有响应能力。是否有其他方法可以在不设置tbody height的情况下执行此操作，以便只有body行在屏幕上滚动，表格标题行始终可见，并且浏览器中只有一个垂直滚动条如前所述，使用表格和响应式设计并非齐头并进。我尝试了很多插件来解决这个问题，但是没

我看到的所有关于table和fixed header的示例都使用css

t车身{
高度：120px；
溢出y：自动；
}

这将创建双垂直滚动条。一个来自浏览器本身，另一个来自表。如果一个页面只有一个宽度为100%的表格，那么这个双滚动条非常难看而且没有响应能力。是否有其他方法可以在不设置tbody height的情况下执行此操作，以便只有body行在屏幕上滚动，表格标题行始终可见，并且浏览器中只有一个垂直滚动条

如前所述，使用表格和响应式设计并非齐头并进。我尝试了很多插件来解决这个问题，但是没有一个插件能够很好地解决这个问题

但在回答滚动条问题时，您可以使用

位置：sticky

使表格标题在垂直滚动表格时保持在屏幕上

我希望我正确理解了这个问题：

页眉、页脚{
高度：50px；
宽度：100%；
背景：#333；
颜色：#fff；
文本对齐：居中；
}
#间隔棒{
高度：500px；
宽度：100%；
背景：#eee；
}
桌子{
宽度：100%；
文本对齐：居中；
}
表td{
边框：1px实心#333；
填充：30px 0px；
}
表tr：第一胎th{
位置：粘性；
顶部：0px；
背景：#333；
}
表tr：第一胎th{
颜色：#fff；
填充：20px 0px；
}

您的代码片段在我看来是空白的。你错过了HTML吗？旁注：如果他们和我一样，开发人员在同一个问题中看到

表格

和

响应

时，他们的眼睛就会变得呆滞。如果文档大于屏幕高度，浏览器滚动条是不可避免的。我仍然有一个问题：除了文档上的表之外，还有其他内容（跳过页眉/导航/横幅/页脚）吗？如果是这样，您有两个选项：（1）带滚动条的表体（表示有更多项目）或（2）不带滚动条的表体。在这里，它只是“如果有很多表数据，就准备一个大页面！”。如果没有，就不要使用溢出？这没有什么不好的。该解决方案在Chrome中不起作用吗？@brezotom在撰写本文时仅对

元素起作用，根据caniuse.com（）@Shawn，谢谢，我不知道为什么以前能起作用，但我现在已经修复了。表tr：第一胎th{