将两个表垂直对齐，其中一个表作为另一个表的 header

Question

我在垂直对齐两个 html table 两列时遇到问题。相关的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;
}

正如您在结果 window 中看到的那样，顶部 'header' table 的复选框列与底部 table 的复选框列不对齐。此外，顶部 table 中复选框的大小与底部不一样，即使 css 几乎相同。我做错了什么？

我想保持 header 不变，同时允许在底部滚动 table。我不想使用jQuery或任何其他工具包。

任何帮助将不胜感激。

Answer 1

为 header 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>

将两个表垂直对齐，其中一个表作为另一个表的 header

Align two tables vertically with one acting as header for another

html

css

vertical-alignment

css-tables