Question

我目前正在实施此问题的答案：Can a table row expand and close?，目前一切正常100％！

但是，正如你在图片中看到的那样，行之间存在一个小的差距，我希望这有两个原因。

我只是希望没有间隙，我希望所有的行能够顺畅地叠放在一起，直到扩展为止。
如果我点击那个微小的间隙，它会向上关闭，然后正常的打开/关闭功能不再适用于它上面的行。

任何帮助表示赞赏！

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

enter image description here

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

@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中的默认样式将{5}填充应用于td内的.table-condensed。您可以在CSS中使用以下规则覆盖此内容...

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

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

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

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

$(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

表行滑动Bug - MVC 5

1 个答案: