title: when hover over the table the checkBoxes move to left
body: <p>Ive mvc application with table with 4 properties ,I use the functionality of hovering the table
  to display some buttons ,when I hover the table I see the buttons but all the check-boxes are 
  moving bit left closer to the name property,there is a way to avoid that the moving of the checkboxes
  when hovering the table</p>
  
  <p>This is the table </p>
  
  <pre><code>&lt;form autocomplete="off"&gt;
      @* Button for adding some user *@
      &lt;div class="text-right"&gt;
          &lt;a href="#" id="addRow"&gt;&lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt; new&lt;/a&gt;
      &lt;/div&gt;
  
  
  
      @* List of users *@
      &lt;table class="table"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.name)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.checkBox1)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.checkBox2)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.checkBox3)
                  &lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tbody id="dataTable"&gt;
              &lt;tr id="emptyRow" style="display: none;"&gt;
                  &lt;td&gt;@Html.TextBox("name")&lt;/td&gt;
                  &lt;td&gt;@Html.CheckBox("checkBox1")&lt;/td&gt;
                  &lt;td&gt;@Html.CheckBox("checkBox2")&lt;/td&gt;
                  &lt;td&gt;@Html.CheckBox("checkBox3")&lt;/td&gt;
                  &lt;td&gt;
                      &lt;span class="actions-default" style="display:none;"&gt;
                          @Html.ActionLink("Edit", "Edit", new { id = -1 }, new { @class = "btn-edit" }) |
                          @Html.ActionLink("Delete", "Delete", new { id = -1 }, new { @class = "btn-delete" })
                      &lt;/span&gt;
                      &lt;span class="actions-editable"&gt;
                          &lt;input type="submit" value="Create" class="btn btn-default btn-create" /&gt;
                          &lt;input type="submit" value="Cancel" class="btn btn-default btn-cancel" /&gt;
                      &lt;/span&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              @foreach (var item in Model)
              {
                  &lt;tr data-id="@item.Id"&gt;
                      &lt;td&gt;
                          @Html.DisplayFor(modelItem =&gt; item.name)
                      &lt;/td&gt;
                      &lt;td&gt;
                          @Html.DisplayFor(modelItem =&gt; item.checkBox1)
                      &lt;/td&gt;
                      &lt;td&gt;
                          @Html.DisplayFor(modelItem =&gt; item.checkBox2)
                      &lt;/td&gt;
                      &lt;td&gt;
                          @Html.DisplayFor(modelItem =&gt; item.checkBox3)
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;span class="actions-default"&gt;
                              @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "btn-edit" }) |
                              @Html.ActionLink("Delete", "Delete", new { id = item.Id }, new { @class = "btn-delete" })
                          &lt;/span&gt;
                          &lt;span class="actions-editable" style="display:none;"&gt;
                              &lt;input type="submit" value="Update" class="btn btn-default btn-update" /&gt;
                              &lt;input type="submit" value="Cancel" class="btn btn-default btn-cancel" /&gt;
                          &lt;/span&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              }
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And this is the css code for hover the table</p>
  
  <pre><code>#dataTable .actions-default {
      display: none;
  }
  
  #dataTable:hover .actions-default {
      display: block;
  }
  </code></pre>