Html 固定表格标题与正文的列宽不匹配

我只想让我的桌子有一个垂直的滚动条，最后我把整个桌子放在一个div里，把桌子的头放在一个固定的位置，结果就是这样。有没有一种简单的方法可以在表格中设置一个简单的滚动条，并且在保持表格在页面中间的同时不减少表格的宽度

thead、tr、th、td、t车身{
边框：1px实心；
文本对齐：居中；
填充：3倍；
}
th{
背景色：#99ccff；
高度：40px；
字体大小：20px；
}
tr{
宽度：500%；
高度：20px；
字号：17px；
}
tr:n个孩子（偶数）{
背景色：#CCFFFF；
}
tr:n个孩子（奇数）{
背景色：#fae8d1；
}
泰德{
位置：固定；
宽度：1200px；
}
tbldiv先生{
宽度：1200px；
高度：600px；
边框：2倍实心；
溢出：自动；
}

名称
生日
性别
婚姻的
地址
电话
电子邮件
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据

您可以使用CSS来完成

.table容器{
高度：10公分；
}
桌子{
显示器：flex；
柔性流动：柱；
身高：100%；
宽度：100%；
}
餐桌{
/*头部的高度符合要求，
当调整表的大小时，它不会缩放*/
flex:0自动；
宽度：钙（100%-0.9em）；
}
桌体{
/*主体占用所有剩余的可用空间*/
flex:1自动；
显示：块；
溢出y：滚动；
}
表tbody tr{
宽度：100%；
}
表thead，
表tbody tr{
显示：表格；
表布局：固定；
}
/*装饰物*/
.桌上容器{
边框：1px纯黑；
填充：0.3em；
}
桌子{
边框：1px纯色浅灰色；
}
表td，表th{
填充：0.3em；
边框：1px纯色浅灰色；
}
表th{
边框：1px纯灰；
}

标题1
标题2
总目3
总目4
内容1
内容2
内容3
内容4
内容1
内容2
内容3
内容4
内容1
内容2
内容3
内容4
内容1
内容2
内容3
内容4
内容1
内容2
内容3
内容4
内容1
内容2
内容3
内容4

试试这个代码

使用

translate

而不是

position

$（“.tbldiv”）.scroll（函数（）{
var translate=“translate（0，+this.scrollTop+“px）”；
$（'thead'）.css（'transform'，translate）；
});
thead、tr、th、td、t车身{
边框：1px实心；
文本对齐：居中；
填充：3倍；
}
表格.滚动{
表布局：固定；
}
th{
背景色：#99ccff；
高度：40px；
字体大小：20px；
}
tr{
宽度：500%；
高度：20px；
字号：17px；
}
tr:n个孩子（偶数）{
背景色：#CCFFFF；
}
tr:n个孩子（奇数）{
背景色：#fae8d1；
}
tbldiv先生{
浮动：左；
高度：200px；
边框：2倍实心；
溢出：自动；
}

名称
生日
性别
婚姻的
地址
电话
电子邮件
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
当你有一个
已修复的东西时
它会与其他元素一起退出流程。我猜你想要一个固定的表格标题，这样你就可以在不丢失标题的情况下滚动表格？是的，先生，我检查了它，但无法修复它，我要再尝试修复它。