填充不像我期望它们在表行中那样

Question

当我hover时，第一个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

Answer 2

试试这个

RequestMapping(value = "/entry/updateQuantity", method = RequestMethod.POST)
public String updateEntryQuantity(@Valid final UpdateQuantityForm form,
                                  @RequestParam("pk") final long pk,
                                  final BindingResult bindingResult,
                                  final Model model) {
}

Answer 3

悬停时只需删除padding-left: -2px;即可。它会正常工作。