表格行滑动错误 - MVC 5

Question

我目前正在这里执行问题的答案：Can a table row expand and close?，目前一切正常 100%！

但是，正如您在图片中看到的那样，行之间有一个小间隙，我希望它消失有两个原因。

1. 我只是希望没有间隙，我希望所有行都平滑地相互叠放直到展开。
2. 如果我点击那个微小的间隙，它将向上关闭，然后正常的打开/关闭功能不再适用于它上面的行。

任何帮助表示赞赏！

我在其中一个空隙处放了一个箭头

这是我对该页面的完整视图（仅供参考），可以在页面底部找到 JS 脚本和额外内容 (<td colspan="12">)。

@model IEnumerable<WebApplication2.ViewModels.Starring.StarringViewModel>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style type="text/css">
    table tr button {
        opacity: 0.5;
        float: right;
    }

    table tr:hover button {
        opacity: 1;
    }
</style>

<br />
<br />
<br />
<br />
<div class="panel panel-primary" style="width:100%">
    <div class="panel-heading">
        <span style="font-size: 30px; font-style:oblique"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-star"></span>Starring</span></span>
    </div>

    <div class="row">
        <div class="col-xs-12">

            <button type="button" style="margin:3px; width:32.8%" class="btn btn-success col-lg-3 col-xs-3" onclick="location.href='@Url.Action("Create", "Movie")';return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Movie</span></button>
            <button type="button" style="margin: 3px; width: 32.8%" class=" btn btn-success col-lg-3 col-xs-3" onclick="location.href='@Url.Action("Create", "Employee")' ;return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Employee</span></button>
            <button type="button" style="margin: 3px; width: 32.8%" class="btn btn-success col-lg-3 col-xs-3" onclick="location.href='@Url.Action("Create", "Show")' ;return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Showing</span></button>

        </div>
    </div>

    <table class="table table-striped table-hover table-responsive table-condensed">
        <tr>
            <th>
                <h3 style="font-size:x-large"><span style="font-weight:bolder">Movie Name</span></h3>
            </th>
            <th>
                <h3 style="font-size:x-large"><span style="font-weight:bolder">Release Date</span></h3>
            </th>
            <th>
                <h3 style="font-size:x-large"><span style="font-weight:bolder">Actor</span></h3>
            </th>
            <th>
                <h3 style="font-size:x-large"><span style="font-weight:bolder">@Html.DisplayNameFor(model => model.Role)</span></h3>
            </th>
            <th></th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td class="col-lg-2">
                    <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.movieName)</span>
                </td>
                <td class="col-lg-2">
                    <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.movieReleaseDate)</span>
                </td>
                <td class="col-lg-1">
                    <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.employeeName)</span>
                </td>
                <td class="col-lg-1">
                    <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.Role)</span>
                </td>
                <td class="col-lg-3">
                    <button type="button" class="btn btn-warning col-lg-3" onclick="location.href='@Url.Action("Edit", "Movie", new { id = item.movieID })';return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>

                    <button type="button" class="btn btn-info col-lg-3 col-lg-offset-1" onclick="location.href='@Url.Action("Details", "Movie", new { id = item.movieID })';return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-align-justify"></span>Details</button>

                    <button type="button" class="btn btn-danger col-lg-3 col-lg-offset-1" onclick="location.href='@Url.Action("Delete", "Movie", new { id = item.movieID })' ;return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
                </td>
            </tr>
            <tr>
                <td colspan="12">
                    <p style="font-size: 17px; font-style: italic; font-family: 'Roboto', sans-serif">
                        MovieID: @Html.DisplayFor(modelItem => item.movieID)
                        <br />
                        Description: @Html.DisplayFor(modelItem => item.movieDescription)
                    </p>
                </td>
            </tr>
        }

    </table>
</div>
<script>

    $(function () {
        $("td[colspan=12]").find("p").hide();
        $("table").click(function (event) {
            event.stopPropagation();
            var $target = $(event.target);
            if ($target.closest("td").attr("colspan") == 12) {
                $target.slideUp();
            } else {
                $target.closest("tr").next().find("p").slideToggle();
            }
        });
    });

</script>

Answer 1

您似乎正在使用 Bootstrap。 Bootstrap 中的默认样式对tds 内的.table-condensed 应用5px 填充。您可以在 CSS 中使用以下规则覆盖它...

.table>tbody>tr>td {
    padding: 0px;
}

如果您只想在 p 折叠时删除填充，您可以更改规则以包含 nopadding 类...

.table>tbody>tr>td.nopadding {
    padding: 0px;
}

当你折叠p时，使用jQuery将类附加到td...

$(function () {
    $("td[colspan=12]").find("p").hide();
    $("td[colspan=12]").addClass("nopadding");

    $("tr").click(function () {
        var $target = $(this);
        var $detailsTd = $target.find("td[colspan=12]");
        if ($detailsTd.length) {
            $detailsTd.find("p").slideUp();
            $detailsTd.addClass("nopadding");
        } else {
            $detailsTd = $target.next().find("td[colspan=12]");
            $detailsTd.find("p").slideToggle();
            $detailsTd.toggleClass("nopadding");
        }
    });
});

JSFiddle