Atualmente, estou implementando a resposta para a pergunta aqui:Uma linha da tabela pode expandir e fechar? e tudo funciona atualmente 100%!

No entanto, como você pode ver na figura, há uma pequena lacuna entre as linhas. Quero que isso ocorra por dois motivos.

Eu simplesmente preferiria que não houvesse lacunas, quero que as linhas fiquem suavemente em cima uma da outra até serem expandidas.Se clicar nesse pequeno espaço, ele fechará para cima e a função normal de abrir / fechar não funcionará mais na linha acima dele.

Qualquer ajuda apreciada!

Coloquei uma flecha em uma das lacunas

Aqui está todo o meuVisão para essa página (apenas para referência), AMBOS o script JS e o conteúdo extra (<td colspan="12">) pode ser encontrado na parte inferior da página.

@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>