如何实现项目中联系人Table的行数据垂直对齐？

Hey Aziz, great question! Getting consistent vertical alignment for table rows is a common tweak, and it's easy to fix with CSS. Let's walk through a couple of solid solutions tailored to your table structure.

Solution 1: Global Vertical Alignment for All Cells #

The simplest approach is to set the vertical-align property for all table header (th) and data (td) elements. This ensures every cell's content is aligned uniformly (most often we use middle for centered vertical alignment, which looks clean for contact tables).

Here's how to implement it:

CSS Code #

.contact-table th, .contact-table td {
  vertical-align: middle;
  /* Optional: Add padding for better spacing between content and cell borders */
  padding: 8px 12px;
}

Updated HTML Table #

Add the contact-table class to your table so the CSS targets it specifically (avoiding conflicts with other tables in your project):

<table class="contact-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Designation</th>
      <th>Organization</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Aziz</td>
      <td>Executive</td>
      <td>BIBT</td>
      <td>Dhaka</td>
    </tr>
    <tr>
      <td>Mizan</td>
      <td>Manager</td>
      <td>BIBT</td>
      <td></td>
    </tr>
  </tbody>
</table>

Solution 2: Custom Alignment for Specific Cells #

If you need different vertical alignment for certain cells (e.g., top-aligning a cell with multi-line text), you can add a custom class to those cells:

CSS Code #

.contact-table th, .contact-table td {
  vertical-align: middle;
  padding: 8px 12px;
}

.align-top {
  vertical-align: top;
}

.align-bottom {
  vertical-align: bottom;
}

Example Usage #

<tr>
  <td>Mizan</td>
  <td>Manager</td>
  <td>BIBT</td>
  <td class="align-top">Some multi-line address<br>that needs top alignment</td>
</tr>

Notes on Empty Cells #

Notice in your example that Mizan's Address cell is empty—don't worry, the vertical-align property still applies here. The empty cell will maintain the same vertical position as the others, keeping your table rows neat and consistent.

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