Выровняйте две таблицы по вертикали так, чтобы одна выступала в качестве заголовка для другой

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;
}

Как видно из окна результатов, столбец флажка в верхней таблице 'header' не совпадает со столбцом флажка нижней таблицы. Кроме того, размер флажка в верхней таблице не совпадает с нижним, хотя 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>