Align two tables vertically with one acting as header for another

Question

I am having trouble vertical aligning two html tables with two columns. The relevant html and css code can be found in this jsfiddle

Here is the relevant 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;
}

As you can see in the results window that the checkbox column in top 'header' table is not aligning with checkbox column of bottom table. Also the size of checkbox in top table is not the same as bottom, even though css is almost same. What am I doing wrong?

I want to keep the header fixed while allowing scroll on bottom table. I do not want to use jQuery or any other toolkit.

Any help will be appreciated.

Answer 1

Give a fixed width for the header td element to align them.

Modified Code:

.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 */
}

Full Code:

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>