Html 将两个表格垂直对齐，其中一个表格用作另一个表格的标题

我无法将两个html表与两列垂直对齐。相关的html和css代码可以在本文档中找到

以下是相关css：

.users-container{ 
   width: 200px;
   height: auto;
   margin: 0;
   padding: 0;
   float: left; 
   overflow:hidden;
   border: 1px solid #99CCFF;
}

.users-filter{
    width: 100%;
    height: 20px;
    border: none;
    border-bottom:1px solid #99CCFF;
}

.users-header{
    width: 100%;   
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.users-header table{
    width: 100%;
    height: auto;
    border-collapse: collapse;
}

.users-header table td{
    padding: 3px 0;
    background-color: #99CCFF;
    color: white;
    vertical-align: center;
}

.users-header  table td:nth-child(1){
    text-align: center;
    border-top: 1px solid #2E8AE6;
    border-right: 1px solid #2E8AE6;
    border-bottom: 1px solid #2E8AE6;
}

.users-header  table td:nth-child(2){
    text-align: left;
    padding-left: 10px;
    border-top: 1px solid #2E8AE6;
    border-bottom: 1px solid #2E8AE6;
}

.users-list{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow: auto;
}

.users-list table {
    width: 100%;
    height: auto;
    border-collapse: collapse;
}

.users-list table td{
    padding: 3px;
    border-bottom: 1px solid #99CCFF;
    vertical-align: center;
}

.users-list table td:nth-child(1){
    text-align: center;
}

.users-list table td:nth-child(2){
    text-align: left;
    padding-left: 10px;
}

正如您在结果窗口中看到的，顶部“header”表中的复选框列未与底部表的复选框列对齐。此外，顶部表格中复选框的大小与底部表格中的复选框大小不同，即使css几乎相同。我做错了什么

我想保持标题固定，同时允许在底部表格上滚动。我不想使用jQuery或任何其他工具包

---

任何帮助都将不胜感激。

为页眉td元素提供一个固定的宽度，以便对齐它们

修改代码：

.users-header table td:nth-child(1) {
  text-align: center;
  border-top: 1px solid #2E8AE6;
  border-right: 1px solid #2E8AE6;
  border-bottom: 1px solid #2E8AE6;
  width: 26px; /* Add fixed width */
}

完整代码：

.users-header table td:nth-child(1) {
  text-align: center;
  border-top: 1px solid #2E8AE6;
  border-right: 1px solid #2E8AE6;
  border-bottom: 1px solid #2E8AE6;
  width: 26px; /* Add fixed width */
}

alluser=[{
id:'1'，
名字：“莫妮卡·安德森”
}, {
id:'2'，
姓名：“史蒂文·布兰肯希普”
}, {
id:'3'，
姓名：“约书亚·琼斯”
}, {
id:'4'，
姓名：“科里·史密斯”
}, {
id:'5'，
姓名：“维卡·汉密尔顿”
}, {
id:'6'，
名字：“钱德勒·宾”
}, {
id:'7'，
姓名：“杰西卡·伍德史密斯”
}, {
id:'8'，
名字：“亚当斯·詹姆斯”
}, {
id:'9'，
姓名：“斯宾塞·德布”
}, {
id:'10'，
姓名：“布兰登·布兰”
}, {
id:'11'，
姓名：‘玉帝满’
}];
大众（诱惑者）；
//功能
功能普及者（用户）{
var usersTableHTML=“”；
console.log（users.length）；
users.forEach（函数（用户）{
usersTableHTML+=“”；
usersTableHTML+=“”；
usersTableHTML+=“”；
usersTableHTML+=“”；
usersTableHTML+=“”+user.name+“”；
usersTableHTML+=“”；
});
usersTableHTML+=“”；
document.getElementById（“用户”）.innerHTML=usersTableHTML；
}
过滤器用户=功能（evt）{
var filterStr=evt.value.toLowerCase（）；
var filteredUsers=allUsers.filter（函数（用户））{
返回（（user.name.toLowerCase（）.indexOf（filterStr））>-1）；
});
民众（过滤者）；
}

*{
字体系列：蒙特塞拉特，Arial；
}
.用户容器{
宽度：200px；
高度：自动；
保证金：0；
填充：0；
浮动：左；
溢出：隐藏；
边框：1px实心#99CCFF；
}
.用户过滤器{
宽度：100%；
高度：20px；
边界：无；
边框底部：1px实心#99CCFF；
}
.用户标题{
宽度：100%；
高度：自动；
保证金：0；
填充：0；
溢出：隐藏；
}
.用户标题表{
宽度：100%；
高度：自动；
边界塌陷：塌陷；
}
.users标题表td{
填充：3px0；
背景色：#99CCFF；
颜色：白色；
垂直对齐：居中；
}
.users头表td:n个子表（1）{
文本对齐：居中；
边框顶部：1px实心#2E8AE6；
右边框：1px实心#2E8AE6；
边框底部：1px实心#2E8AE6；
宽度：26px；
}
.users头表td:n个子表（2）{
文本对齐：左对齐；
左侧填充：10px；
边框顶部：1px实心#2E8AE6；
边框底部：1px实心#2E8AE6；
}
.用户名单{
宽度：100%；
高度：自动；
保证金：0；
填充：0；
最大高度：200px；
溢出：自动；
}
.用户列表表{
宽度：100%；
高度：自动；
边界塌陷：塌陷；
}
.用户列表表td{
填充：3倍；
边框底部：1px实心#99CCFF；
垂直对齐：居中；
}
.用户列表表td:n子项（1）{
文本对齐：居中；
}
.用户列表表td:n子项（2）{
文本对齐：左对齐；
左侧填充：10px；
}

用户名

感谢您的快速回复。但这样做将保留我的另一个问题。正如您所看到的，“header”表格中的复选框看起来比底部表格中的复选框小。此外，放大和缩小会导致对齐错误，例如，如果您尝试放大或缩小，您会看到它在放大或缩小时会断开。但我没有看到注释JSFIDLE上应用的固定宽度。我之前添加了它，但结果不是我想要的。不管怎样，我又添加了一次，当放大时，仍然会出现两列的列分隔符。设置固定长度确实有帮助。然而，真正的问题是我正在应用于标题表中第一列的填充。它应该是“padding:3px；”而不是“填充：3px 0；”针对固定表标题的CSS专用解决方案并没有那么简单，但我还是找到了一个相关的解决方案：现在由您决定是否将其放入您的案例中。感谢您的回复，但我尝试使用括号中的相同代码，但格式不好。