Align items center doesn't work properly on table row?

Question

I want to align table.

My code

tr {
        height: 70px;
        display: flex;
        align-items: center;
      }

    tr:hover {
    border-bottom: 2px solid black;
    }

<table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
      </tr>
      <tr>
        <td>Peter</td>
        <td>Griffin</td> 
      </tr>
      <tr>
        <td>Lois</td>
        <td>Griffin</td> 
      </tr>
      <tr>
        <td>Joe</td>
        <td>Swanson</td> 
      </tr>
      <tr>
        <td>Cleveland</td>
        <td>Brown</td> 
      </tr>
    </table>

Just check my align-items: center;

When set it to align vertical alignment I got a problem. On hover on row all row moves by 2 pixels (this border). Without align-items: center , to work good but is not aligned.

Please don't vandalize your posts. By posting on the Stack Exchange network, you've granted a non-revocable right, under the [CC BY-SA 4.0 license](https://creativecommons.org/licenses/by-sa/4.0/), for Stack Exchange to distribute that content (i.e. regardless of your future choices). By Stack Exchange policy, the non-vandalized version of the post is the one which is distributed, and thus, any vandalism will be reverted. If you want to know more about deleting a post please see: [How does deleting work?](/help/what-to-do-instead-of-deleting-question). — cigien, Aug 12 '21 at 23:27

Nitheesh · Answer 1 · 2021-08-10T07:57:53.623

Add a transparent border on normal state and add a px border on hover. This wlll help you.

Your row is flickering not because of the align-items. Its because that there was no border initially and on hover you added a 2 px border. This made the lower element to move px down. To resolve this add a transparent border on normal state. This will consumes a 2px border initially and on hover, you are just updating the border color.

tr {
    height: 70px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid transparent;
}

tr:hover {
    border-bottom: 2px solid black;
}

<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>
    <tr>
        <td>Peter</td>
        <td>Griffin</td>
    </tr>
    <tr>
        <td>Lois</td>
        <td>Griffin</td>
    </tr>
    <tr>
        <td>Joe</td>
        <td>Swanson</td>
    </tr>
    <tr>
        <td>Cleveland</td>
        <td>Brown</td>
    </tr>
</table>

I am find another solution. I set height: calc(70px - 2px) ; — yanadod, Aug 10 '21 at 07:58
@yanadod that may solve the problem. But using `calc` in css will create performance issues. — Nitheesh, Aug 10 '21 at 07:58

Align items center doesn't work properly on table row?

My code

1 Answers1