表格设置100%高度后内部元素错位：如何实现与示例图一致的样式及响应式横向滚动

The main issues causing misalignment when setting height: 100% on your table are:

• Missing explicit height on parent elements (so the table doesn’t know what "100%" refers to)
• Lack of vertical alignment for table cell content
• Unmerged borders leading to spacing inconsistencies

Here’s how to fix it while adding responsive horizontal scroll:

Step-by-Step Fixes #

1. Set Full Height Context: Ensure html, body, and the table container have height: 100% to give the table a clear height reference.
2. Consistent Table Layout: Use table-layout: fixed for predictable column widths and border-collapse: collapse to merge borders cleanly.
3. Vertical Alignment: Add vertical-align: middle to all table cells to keep content centered vertically.
4. Responsive Scroll Wrapper: Wrap the table in a container with overflow-x: auto to enable horizontal scrolling on small screens.

Full Working Code #

CSS #

/* Reset default margins and set full height context */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Responsive scroll wrapper */
.table-scroll {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  overflow-x: auto; /* Enable horizontal scroll on small screens */
}

/* Table styling */
table {
  width: 100%;
  height: 100%;
  border-collapse: collapse; /* Merge borders */
  table-layout: fixed; /* Consistent column widths */
  border: 1px solid black;
}

/* Heading cells */
.heading th {
  text-align: left;
  background-color: #f0f0f0; /* Optional: highlight header */
}

/* All table cells */
th, td {
  border: 1px solid black; /* Inner cell borders */
  padding: 8px;
  vertical-align: middle; /* Center content vertically */
}

/* Name column flex layout */
.name {
  display: flex;
  align-items: center;
  gap: 8px; /* Add space between image and text */
}

/* Optional: Make image responsive */
.name img {
  max-width: 80px;
  height: auto;
}

HTML #

<div class="table-scroll">
  <table>
    <tr class="heading">
      <th>Name</th>
      <th>Status</th>
      <th>Rating</th>
      <th>Test</th>
    </tr>
    <tr>
      <td class="name">
        <img src="https://via.placeholder.com/80x40" alt="User avatar" />
        John Johnson
      </td>
      <td>Free</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <!-- Add more rows if needed -->
  </table>
</div>

Key Notes #

• The html and body elements are set to height: 100% to ensure the table can stretch to the full viewport height.
• border-collapse: collapse removes unwanted spacing between cell borders, which was likely contributing to misalignment.
• vertical-align: middle ensures all cell content (images, text) stays centered vertically, even when rows are tall.
• The table-scroll container lets the table scroll horizontally on narrow screens without breaking the layout.

内容的提问来源于stack exchange，提问作者Dave