Próbowałem dodać pasek przewijania do mojego tbody, tak aby moja thead trzymała się na górze. Pasek przewijania działa, a mój thead wygląda tak, jak chcę, ale problem polega na tym, że moje kolumny tbody nie są już „wyrównane” z szerokościami kolumn ustawionymi w moim thead. Moje szerokości kolumn thead są „automatycznie dopasowywane” do zawartości i chcę, aby moje szerokości tbody pasowały do tego, co jest ustawione w thead.

Usunięcie „display: block” oczywiście rozwiązuje ten problem, ale usuwa mój pasek przewijania, więc utknąłem. Próbowałem też dodać 100% width do mojego tbody, a także dodać 100% width and display: block do mojego thead - to niczego nie zmieniło.

Zobacz moją zmianę na dole, aby zobaczyć inną rzecz, którą wypróbowałem

Jak dodać pasek przewijania do mojego tbody bez zmiany szerokości moich kolumn?

enter image description here

<table id="CmtRequests" class="table-condensed table-bordered table-striped table-responsive" cellspacing="0">
    @* Header *@
    <thead>
        @* Filters row *@
        <tr>
            <th>
                <a asp-page="./Index" class="btn btn-sm btn-dark">Reset</a>
                <input formmethod="get" type="submit" value="Refresh" class="btn btn-sm btn-primary" />
            </th>
            <th>
                <select class="form-control" asp-for="SupplierFilter" asp-items="Model.SupplierList"><option selected></option></select>
            </th>
            <th>
                <select class="form-control" asp-for="ReasonFilter" asp-items="Model.ReasonList"><option selected></option></select>
            </th>
            @*etc..*@
        </tr>
        @* Title row *@
        <tr>
            <th>
                Title
            </th>
            <th>
                Title
            </th>
            <th>
                Title
            </th>
            @*etc..*@
        </tr>
    </thead>
    @* Body *@
    <tbody style="overflow-y:scroll; overflow-x:hidden; height:38vh; display:block;">
        @foreach (var item in Model.CmtRequests)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.PartNo)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SupplierNo)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Priority)
                </td>
                @*etc..*@
            </tr>
        }
    </tbody>
</table>

EDYTUJ: próbowałem dodać następującą klasę CSS z poprawioną tabelą, pozbywając się wszystkich ustawień stylu w moim kodzie HTML powyżej i używając go zamiast tego (z ten artykuł), a pasek przewijania nie pojawia się, więc musi się wydarzyć coś większego:

.table-fixed tbody {
    height: 38vh;
    overflow-y: auto;
    width: 100%;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
    display: block;
}

    .table-fixed tr:after {
        content: "";
        display: block;
        visibility: hidden;
        clear: both;
    }

    .table-fixed tbody td,
    .table-fixed thead > tr > th {
        float: left;
    }

0
mstiver2018 25 marzec 2020, 17:58

2 odpowiedzi

Najlepsza odpowiedź

Zdecydowany! Znalazłem bardzo łatwe rozwiązanie, szczegółowe informacje znajdziesz w tym artykule.

0
mstiver2018 6 kwiecień 2020, 20:24

To działa:

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!------ Include the above in your HEAD tag ---------->

    <div class="container">
      <div class="row">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4>
                Fixed Header Scrolling Table 
              </h4>
            </div>
            <table class="table table-fixed">
              <thead>
                <tr>
                  <th class="col-xs-2">#</th><th class="col-xs-8">Name</th><th class="col-xs-2">Points</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="col-xs-2">1</td><td class="col-xs-8">Mike Adams</td><td class="col-xs-2">23</td>
                </tr>
                <tr>
                  <td class="col-xs-2">2</td><td class="col-xs-8">Holly Galivan</td><td class="col-xs-2">44</td>
                </tr>
                <tr>
                  <td class="col-xs-2">3</td><td class="col-xs-8">Mary Shea</td><td class="col-xs-2">86</td>
                </tr>
                <tr>
                  <td class="col-xs-2">4</td><td class="col-xs-8">Jim Adams</td><td>23</td>
                </tr>
                <tr>
                  <td class="col-xs-2">5</td><td class="col-xs-8">Henry Galivan</td><td class="col-xs-2">44</td>
                </tr>
                <tr>
                  <td class="col-xs-2">6</td><td class="col-xs-8">Bob Shea</td><td class="col-xs-2">26</td>
                </tr>
                <tr>
                  <td class="col-xs-2">7</td><td class="col-xs-8">Andy Parks</td><td class="col-xs-2">56</td>
                </tr>
                <tr>
                  <td class="col-xs-2">8</td><td class="col-xs-8">Bob Skelly</td><td class="col-xs-2">96</td>
                </tr>
                <tr>
                  <td class="col-xs-2">9</td><td class="col-xs-8">William Defoe</td><td class="col-xs-2">13</td>
                </tr>
                <tr>
                  <td class="col-xs-2">10</td><td class="col-xs-8">Will Tripp</td><td class="col-xs-2">16</td>
                </tr>
                <tr>
                  <td class="col-xs-2">11</td><td class="col-xs-8">Bill Champion</td><td class="col-xs-2">44</td>
                </tr>
                <tr>
                  <td class="col-xs-2">12</td><td class="col-xs-8">Lastly Jane</td><td class="col-xs-2">6</td>
                </tr>
              </tbody>
            </table>
          </div>
      </div>
    </div>

CSS: ==> szerokość: 97%; Zrób sztuczkę

.table-fixed thead {
  width: 97%;
}
.table-fixed tbody {
  height: 230px;
  overflow-y: auto;
  width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
  display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
  float: left;
  border-bottom-width: 0;
}
0
Codebreaker007 25 marzec 2020, 19:17