padding not behaving like I expect them to in a table row

Question

When I hover over this, the first td moves. But why? I'd like for it to remain stationary.

.q-tr:hover {
    border-left: 2px solid #35ccea;
    padding-left: -2px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">      
  <table class="table">
    <thead>
      <tr class = 'q-tr'>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr class = 'q-tr'>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class = 'q-tr'>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class = 'q-tr'>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

Remove your `padding:-2px` and add `box-sizing : border-box` to your css — nayeri, Jul 19 '16 at 08:27
`padding` is inside the element (and border), you should use `margin`, though it won't work on table rows and cells ... Vucko has a working solution for you — Asons, Jul 19 '16 at 08:34

score 3 · Accepted Answer · edited May 23 '17 at 11:58

3

Because tables with the collapsing border model don't have padding at all (reference).

Update - thanks @LGSon for mentioning that it won't work for IE - reference.

So, instead of targeting the tr, target the first cell in each tr:

.q-tr > td:first-child {
    border-left: 2px solid transparent;
}

.q-tr:hover > td:first-child {
  border-left: 2px solid #35ccea;  
}

Bootply

edited May 23 '17 at 11:58

Community

1
1

answered Jul 19 '16 at 08:28

Vucko

20,555
10
56
107

That's really smart. Thanks! – nachime Jul 19 '16 at 08:37
why is that the case? – nachime Jul 19 '16 at 08:56
@nachime In early days (even today actually) the interpretation of the specs. weren't the same, hence different browsers renders elements (the table element particularly) different, so what IE lacks will IE lack since now they have Edge, where it work with hover on table rows – Asons Jul 19 '16 at 10:04

score 0 · Answer 2 · answered Jul 19 '16 at 08:27

0

Try This

 table.table tr th, table.table tr td {

    border-left: 1px solid transparent;
}

answered Jul 19 '16 at 08:27

Head In Cloud

2,001
1
8
10

score 0 · Answer 3 · answered Jul 19 '16 at 08:32

0

Just remove padding-left: -2px; when you hover. It will work fine.

answered Jul 19 '16 at 08:32

padding not behaving like I expect them to in a table row

3 Answers3