TD height issues in the table

Question

I am having a table with the below structure -

**HTML:**
    <table>
        <tr class="table_row row_over">
          <td><input type="checkbox" name="check_data_1" class="check_box" /></td>
          <td>
              Data1
          </td>
          <td>$0.000</td>
          <td>$0.000</td>
          <td>$0.000</td>
          <td>
              <span class="row_controls">
                  <a href="#" class="icon_22 icon_delete">
                     <span>Delete</span>
                  </a>
              </span>
          </td>
        </tr>
    </table>

**CSS:**
.icon_delete {
    background-position: 0 0px;
}
.icon_22 {
    background-image: url("../images/icon_sprite.png");
    background-repeat: no-repeat;
    display: inline-block;
    height: 24px;    
    width: 24px;
    margin-right: 5px;
}

Problem: Height of the TD increases based on icon height. It increases the TD height and mis-allign with other td, where as I have still space left at bottom of TD.

Expected as attached image herewith:

Answer 1

Unless .row_controls is position: relative; and the icon is position: absolute; , it's going to be part of the normal flow and therefore occupy space.

Currently you are using inline-block . You need to pull it out of the normal flow by using positioning or floating techniques.

Try the following as a base.

.row_controls {
  position: relative;
}

.icon_22 {
  position: absolute;
}

Answer 2

if you would like to align the icon to the middle, I would do it like this:

change the icon's css to display: block :

.icon_22 {
    background-image: url("../images/icon_sprite.png");
    background-repeat: no-repeat;
    display: block;
    height: 24px;    
    width: 24px;
    margin-right: 5px;
}

Then, and because you're using a td , specify a class to that td so it aligns vertically in the middle:

<td class="alignMiddle">

and the CSS:

.alignMiddle {
   vertical-align: middle;
}