javascript - 当鼠标悬停在表格上时，复选框会向左移动

Question

我有一个带有 4 个属性的表的 mvc 应用程序，我使用悬停表的功能显示一些按钮，当我将鼠标悬停在表格上时，我看到了按钮，但所有的复选框都是向左移动靠近 name 属性的位，有一种方法可以避免复选框的移动悬停在 table 上时

这是表格

<form autocomplete="off">
    @* Button for adding some user *@
    <div class="text-right">
        <a href="#" id="addRow"><i class="glyphicon glyphicon-plus"></i> new</a>
    </div>



    @* List of users *@
    <table class="table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.name)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.checkBox1)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.checkBox2)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.checkBox3)
                </th>
                <th></th>
            </tr>
        </thead>

        <tbody id="dataTable">
            <tr id="emptyRow" style="display: none;">
                <td>@Html.TextBox("name")</td>
                <td>@Html.CheckBox("checkBox1")</td>
                <td>@Html.CheckBox("checkBox2")</td>
                <td>@Html.CheckBox("checkBox3")</td>
                <td>
                    <span class="actions-default" style="display:none;">
                        @Html.ActionLink("Edit", "Edit", new { id = -1 }, new { @class = "btn-edit" }) |
                        @Html.ActionLink("Delete", "Delete", new { id = -1 }, new { @class = "btn-delete" })
                    </span>
                    <span class="actions-editable">
                        <input type="submit" value="Create" class="btn btn-default btn-create" />
                        <input type="submit" value="Cancel" class="btn btn-default btn-cancel" />
                    </span>
                </td>
            </tr>
            @foreach (var item in Model)
            {
                <tr data-id="@item.Id">
                    <td>
                        @Html.DisplayFor(modelItem => item.name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.checkBox1)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.checkBox2)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.checkBox3)
                    </td>
                    <td>
                        <span class="actions-default">
                            @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "btn-edit" }) |
                            @Html.ActionLink("Delete", "Delete", new { id = item.Id }, new { @class = "btn-delete" })
                        </span>
                        <span class="actions-editable" style="display:none;">
                            <input type="submit" value="Update" class="btn btn-default btn-update" />
                            <input type="submit" value="Cancel" class="btn btn-default btn-cancel" />
                        </span>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</form>

这是悬停表格的CSS代码

#dataTable .actions-default {
    display: none;
}

#dataTable:hover .actions-default {
    display: block;
}

Answer 1

这可能是因为当您显示按钮时，表格单元格变宽，因此每隔一列调整它们的大小以匹配您的容器宽度。

试着给你的列一个宽度