如何将表格表头排序图片右对齐并紧贴表头文本？

Hey there! Let's tackle your two table header image issues one by one:

There are a few solid approaches to achieve this, pick the one that fits your layout needs:

• Method 1: Use Flexbox (Recommended)
  Set display: flex; justify-content: space-between; align-items: center; on the <th> element. This will keep the header text left-aligned, push the image to the right, and ensure vertical centering. Example code:

  <th style="display: flex; justify-content: space-between; align-items: center;">
    address
    <img class="waves-effect waves-light" src="../assets/sorting.png">
  </th>
  

• Method 2: Float the Image
  Add float: right; to the image. Make sure the <th> has overflow: hidden; to contain the floated element, and optionally add a small margin to the text to avoid overlap:

  <th style="overflow: hidden;">
    address
    <img class="waves-effect waves-light" src="../assets/sorting.png" style="float: right;">
  </th>
  

• Method 3: Text Align + Span Wrapper
  Set text-align: right; on the <th>, then wrap the header text in a <span> with float: left;. This works but is less intuitive than flexbox.

Let's look at your original code:

<th><img class="waves-effect waves-light" src="../assets/sorting.png" style="text-align: right; padding-right: 0">address</th>

Here's what's going wrong:

1. Wrong Element Order: You placed the image before the text, so it will render left of the text by default—this defeats your goal of having the image sit right next to the text on its right side.
2. Misused text-align: right: text-align controls alignment inside block-level elements. Applying it to an inline <img> element does nothing. You need to apply this style to the parent <th> instead, or use flex/float methods.
3. No Vertical Alignment: Even if you fix the order, the image and text might be misaligned vertically. You need to add alignment controls to keep them centered.

Fixed code (using flexbox, the cleanest solution):

<th style="display: flex; align-items: center; gap: 0;">
  address
  <img class="waves-effect waves-light" src="../assets/sorting.png">
</th>

Set gap: 0 to remove any spacing between the text and image. If you prefer not to use flexbox, this also works:

<th>
  address
  <img class="waves-effect waves-light" src="../assets/sorting.png" style="vertical-align: middle; margin-left: 0;">
</th>

This keeps the image tightly next to the text, vertically centered with no extra space.

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