CODEWITHSUNDEEP
htmlcss
user13286
user13286

Reputation: 3075

Move the tbody of a table up using CSS

I am trying to create a table which will have dozens of rows, but what I would like to do is have only 5 of the rows shown at once. To accomplish this my thought is to set a height on the container of the table and hide overflow and then use top or translateY or some other method to shift the rows within the tbody up or down. Unfortunately I can't seem to get this to work quite right.

Here's my current attempt using transform, this seems to cause issues with the table border and the tbody cells are going over the top of the thead cells. I also tried a few things using a negative top value but couldn't get it to work that way either:

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

Upvotes: 1

Views: 1003

Answers (1)

Blazemonger
Blazemonger

Reputation: 92953

Instead of transforming the table, you could just use :nth-child() to hide select rows.

$(function() {
  $('button').click(function() {
    $('table tbody').toggleClass('shifted');
  });
});
.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;
}
<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>

Upvotes: 2

Related Questions