css - 填充不像我期望的那样在表格行中

Question

当我将鼠标悬停 时，第一个td 移动。但为什么？我希望它保持静止。

.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>

Answer 1

因为具有折叠边框模型的表格根本没有填充 (reference)。

更新 - 感谢@LGSon 提到它不适用于 IE - reference .

因此，不是以 tr 为目标，而是以每个 tr 中的第一个单元格为目标:

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

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

Bootply