Question

这是我的网页模板。我想冻结标题部分以及“＃”和“Rank”列。垂直滚动应仅滚动行，水平滚动应滚动到Header3以后。

        |     #    |   Rank  | Header3 | Header4 | Header5 | Header6 |
  []    |    #1    |  Rank1  | 
  []    |    #2    |  Rank2  | 
  []    |    #3    |  Rank3  | 
  []    |    #4    |  Rank4  | 
  []    |    #5    |  Rank5  | 
  []    |    #6    |  Rank6  |

我认为应该有不同的css样式的单独标签。其中一个标题css样式应包含position:fixed。

<div class="form-horizontal table-responsive table-masterinput">
    <table class="table table-hover table-bordered table-striped" id="whatever">
        <thead>
            <tr>
                <th></th>
                <th class="text-center">#</th>
                <th class="text-center">Rank</th>
                <th class="text-center">Header3</th>
                <th class="text-center">Header4</th>
                <th class="text-center">Header5</th>
                <th class="text-center">Header6</th>
            </tr>
        </thead>
        <tbody>
            @{
                var index = 1;
                if (Model != null && Model.Any())
                {
                    foreach (var items in Model)
                    {
                        total += 1;

                        <tr class="checkCountData" id=@("item" + index)>
                            <td>
                                <input type="checkbox" name="@items.Id" id="@items.Id" />
                            </td>
                            <td>
                                <label data-Id="@items.Id" style="width: 100px; text-align: center" class="inputRank" name="inputRank">@items.RANK_CODE</label>
                            </td>
                            <td>Item3</td>
                            <td>Item4</td>
                            <td>Item5</td>
                            <td>Item6</td>
                        </tr>

                        index++;
                    }
                }
            }
        </tbody>
    </table>

这是我的css：

.table-masterinput {
    overflow-x: auto;
    height: auto;
    bottom: 0px;
    top: 300px;
    right: 0px;
    left: 180px;
    position: fixed;
}

有人可以帮忙吗？

Answer 1

尝试使用jquery和css或尝试此fiddle check here

$(document).ready(function() {
  $('tbody').scroll(function(e) { //detect a scroll event on the tbody
  	/*
    Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
    of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain 			it's relative position at the left of the table.    
    */
    $('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
    $('thead th:nth-child(1), thead th:nth-child(2)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
    $('tbody td:nth-child(1), tbody td:nth-child(2)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
  });
});

table {
  position: relative;
  width: 700px;
  background-color: #aaa;
  overflow: hidden;
  border-collapse: collapse;
}


/*thead*/
thead {
  position: relative;
  display: block; /*seperates the header from the body allowing it to be positioned*/
  width: 700px;
  overflow: visible;
}

thead th {
  background-color: #99a;
  min-width: 120px;
  height: 32px;
  border: 1px solid #222;
}

thead th:nth-child(1) {/*first cell in the header*/
  position: relative;
  display: block; /*seperates the first cell in the header from the header*/
  background-color: #88b;
}

thead th:nth-child(2) {/*first cell in the header*/
  position: relative;
  background-color: #88b;
}


/*tbody*/
tbody {
  position: relative;
  display: block; /*seperates the tbody from the header*/
  width: 700px;
  height: 239px;
  overflow: scroll;
}

tbody td {
  background-color: #bbc;
  min-width: 120px;
  border: 1px solid #222;
}

tbody tr td:nth-child(1) {  /*the first cell in each tr*/
  position: relative;
  display: block; /*seperates the first column from the tbody*/
  height: 40px;
  background-color: #99a;
}
tbody tr td:nth-child(2) {  /*the first cell in each tr*/
  position: relative;
  height: 40px;
  background-color: #99a;
}

<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Rank</th>
        <th>Header1</th>
        <th>Header2</th>
        <th>Header3</th>
        <th>Header4</th>
        <th>Header5</th>
        <th>Header6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>#1</td>
        <td>Rank1</td>
        <td>Cheshire</td>
        <td>52</td>
        <td>Brewer</td>
        <td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
         <td>#2</td>
        <td>Rank2</td>
        <td>Cumbria</td>
        <td>34</td>
        <td>Shepherdess</td>
        <td>£28,000</td>
        <td>Single</td>
        <td>0</td>
      </tr>
      <tr>
         <td>#3</td>
        <td>Rank3</td>
        <td>Wiltshire</td>
        <td>57</td>
        <td>Musician</td>
        <td>£124,000</td>
        <td>Married</td>
        <td>4</td>
      </tr>
      <tr>
         <td>#4</td>
        <td>Rank4</td>
        <td>Worchestershire</td>
        <td>48</td>
        <td>Naturalist</td>
        <td>£65,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
         <td>#5</td>
        <td>Rank5</td>
        <td>Hertfordshire</td>
        <td>67</td>
        <td>Pharmasist</td>
        <td>Retired</td>
        <td>Married</td>
        <td>3</td>
      </tr>
      <tr>
         <td>#6</td>
        <td>Rank6</td>
        <td>Lothian </td>
        <td>36</td>
        <td>Vigilante</td>
        <td>£86,000</td>
        <td>Single</td>
        <td>Unknown</td>
      </tr>
      <tr>
         <td>#7</td>
        <td>Rank7</td>
        <td>Bedfordshire</td>
        <td>43</td>
        <td>Housewife</td>
        <td>N/A</td>
        <td>Married</td>
        <td>1</td>
      </tr>
      <tr>
         <td>#8</td>
        <td>Rank8</td>
        <td>New York</td>
        <td>55</td>
        <td>Policewoman</td>
        <td>$36,000</td>
        <td>Single</td>
        <td>1</td>
      </tr>
      <tr>
         <td>#9</td>
        <td>Rank9</td>
        <td>Lincolnshire</td>
        <td>45</td>
        <td>Landowner</td>
        <td>Lots</td>
        <td>Married</td>
        <td>6</td>
      </tr>
      <tr>
         <td>#10</td>
        <td>Rank10</td>
        <td>Cheshire</td>
        <td>352</td>
        <td>Arcanist</td>
        <td>A pile of gems</td>
        <td>Single</td>
        <td>0</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

冻结标题/列CSS

1 个答案: