Question

我正在尝试创建一个包含数十行的表，但我想要做的是一次只显示5行。为了实现这一点，我的想法是在表的容器上设置一个高度并隐藏溢出，然后使用top或translateY或其他一些方法来移动tbody内的行或者下。不幸的是，我似乎无法使其正常工作。

这是我目前使用转换的尝试，这似乎会导致表格边框出现问题，tbody单元格会越过thead单元格的顶部。我还尝试了使用负top值的一些内容，但无法以这种方式工作：

$(function() {
  $('button').click(function() {
    $('table tbody').toggleClass('shifted');
  });
});

.container {
  height:175px;
  overflow:hidden;
}

table {
  border-collapse:collapse;
}
  thead td {
    background:white;
  }
  tbody.shifted {
    transform:translateY(-145px);
  }
  td {
    border:1px solid black;
    padding:5px;
  }
  
button {
  margin-top:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table>
    <thead>
      <tr>
        <td>Heading 1</td>
        <td>Heading 2</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem 1</td>
        <td>Ipsum 1</td>
      </tr>
      <tr>
        <td>Lorem 2</td>
        <td>Ipsum 2</td>
      </tr>
      <tr>
        <td>Lorem 3</td>
        <td>Ipsum 3</td>
      </tr>
      <tr>
        <td>Lorem 4</td>
        <td>Ipsum 4</td>
      </tr>
      <tr>
        <td>Lorem 5</td>
        <td>Ipsum 5</td>
      </tr>
      <tr>
        <td>Lorem 6</td>
        <td>Ipsum 6</td>
      </tr>
      <tr>
        <td>Lorem 7</td>
        <td>Ipsum 7</td>
      </tr>
      <tr>
        <td>Lorem 8</td>
        <td>Ipsum 8</td>
      </tr>
      <tr>
        <td>Lorem 9</td>
        <td>Ipsum 9</td>
      </tr>
      <tr>
        <td>Lorem 10</td>
        <td>Ipsum 10</td>
      </tr>
    </tbody>
  </table>
</div>

<button>Shift table rows</button>

Answer 1

您可以使用:nth-child()隐藏选定的行，而不是转换表格。

＆＃13;

$(function() {
  $('button').click(function() {
    $('table tbody').toggleClass('shifted');
  });
});

＆＃13;

.container {
  overflow: hidden;
}

table {
  border-collapse: collapse;
}
thead td {
  background: white;
}

tbody tr:nth-child(n+6) {/* 6th row and later */
  display: none;
}
tbody.shifted tr:nth-child(n) {/* override the non-shifted styles */
  display: table-row;
}
tbody.shifted tr:nth-child(-n+5) {/* 5th row and earlier */
  display: none;
}

td {
  border: 1px solid black;
  padding: 5px;
}
button {
  margin-top: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table>
    <thead>
      <tr><td>Heading 1</td><td>Heading 2</td></tr>
    </thead>
    <tbody>
      <tr><td>Lorem 1</td><td>Ipsum 1</td></tr>
      <tr><td>Lorem 2</td><td>Ipsum 2</td></tr>
      <tr><td>Lorem 3</td><td>Ipsum 3</td></tr>
      <tr><td>Lorem 4</td><td>Ipsum 4</td></tr>
      <tr><td>Lorem 5</td><td>Ipsum 5</td></tr>
      <tr><td>Lorem 6</td><td>Ipsum 6</td></tr>
      <tr><td>Lorem 7</td><td>Ipsum 7</td></tr>
      <tr><td>Lorem 8</td><td>Ipsum 8</td></tr>
      <tr><td>Lorem 9</td><td>Ipsum 9</td></tr>
      <tr><td>Lorem 10</td><td>Ipsum 10</td></tr>
    </tbody>
  </table>
</div>

<button>Shift table rows</button>

＆＃13;

使用CSS移动表格的tbody

1 个答案: