html - 将两个表格垂直对齐，其中一个表格作为另一个表格的标题

Question

我在垂直对齐两个具有两列的 html 表格时遇到问题。相关的html和css代码可以在这个jsfiddle中找到

这是相关的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;
}

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

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

我们将不胜感激。

Answer 1

为标题 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 */
}

完整代码:

allUsers = [{
  id: '1',
  name: 'Monica Anderson'
}, {
  id: '2',
  name: 'Steven Blankenship'
}, {
  id: '3',
  name: 'Joshua Jones'
}, {
  id: '4',
  name: 'Corry Smith'
}, {
  id: '5',
  name: 'Vikar Hamilton'
}, {
  id: '6',
  name: 'Chandler Bing'
}, {
  id: '7',
  name: 'Jessica Woodsmith'
}, {
  id: '8',
  name: 'Adams James'
}, {
  id: '9',
  name: 'Spencer Deb'
}, {
  id: '10',
  name: 'Brandon Bran'
}, {
  id: '11',
  name: 'Yudi Man'
}];

PopulateUsers(allUsers);


// Functions
function PopulateUsers(users) {

  var usersTableHTML = "<table>";

  console.log(users.length);
  users.forEach(function(user) {

    usersTableHTML += "<tr>";

    usersTableHTML += "<td style=\"border-right: 1px solid #99CCFF;\">";
    usersTableHTML += "<input type=\"checkbox\" id=\"" + user.id + "\" value=\"" + user.name + "\">";
    usersTableHTML += "</td>";
    usersTableHTML += "<td>" + user.name + "</td>";

    usersTableHTML += "</tr>";
  });
  usersTableHTML += "</table>";
  document.getElementById("users").innerHTML = usersTableHTML;
}

FilterUsers = function(evt) {

  var filterStr = evt.value.toLowerCase();
  var filteredUsers = allUsers.filter(function(user) {
    return ((user.name.toLowerCase().indexOf(filterStr)) > -1);
  });

  PopulateUsers(filteredUsers);
}

* {
  font-family: Montserrat, Arial;
}
.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;
  width: 26px;
}
.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;
}

<body>
  <div class="users-container">
    <input type="text" class="users-filter" placeholder="Search by name" onkeyup="FilterUsers(this)">
    <div class="users-header">
      <table>
        <tr>
          <td>
            <input type="checkbox" id="all" value="change-all-users">
          </td>
          <td>User Name</td>
        </tr>
      </table>
    </div>
    <div id="users" class="users-list">

    </div>
  </div>
</body>