CODEWITHSUNDEEP
htmlcss
Matt Spinks
Matt Spinks

Reputation: 6700

Is it possible to clip an absolute table header behind the container WITHOUT javascript?

I am attempting to implement sticky headers in my table. In the example below, is it possible to clip the header behind the container, without adding any more javascript?

$(document).ready(function() {
  $('.grid-body').scroll(function(e) {
    $('thead').css("left", -$(".grid-body").scrollLeft() + 8);
  });
});
.container {
  background-color:#ffcccc;
  width:150px;
}
.grid-header {
  width:100%;
  overflow:hidden;
}
.grid-body {
  height:200px;
  overflow:auto;
}
table {
  border-collapse: collapse;
}
td, th {
  width: 100px;
  min-width: 100px;
  background-color: #e0e0e0;
}
thead {
  background-color:#ccffcc;
  position:absolute;
}
tbody {
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="grid-header">
      <table id="callLogExplorer">
        <thead>
          <tr>
            <th>head1</th>
            <th>head2</th>
            <th>head3</th>
          </tr>
        </thead>
      </table>
    </div>
    <div class="grid-body">
      <table>
        <tbody>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

Upvotes: 0

Views: 58

Answers (1)

SvenL
SvenL

Reputation: 1954

Just add position: relative and overflow: hidden to your container div, in your case .container and remove the eight pixels which you are adding in your JavaScript.

$(document).ready(function() {
  $('.grid-body').scroll(function(e) {
    $('thead').css("left", -$(".grid-body").scrollLeft());
  });
});
.container {
  position: relative;
  background-color: #ffcccc;
  width: 150px;
  overflow: hidden;
}

.grid-header {
  width: 100%;
}

.grid-body {
  height: 200px;
  overflow: auto;
}

table {
  border-collapse: collapse;
}

td,
th {
  width: 100px;
  min-width: 100px;
  background-color: #e0e0e0;
}

thead {
  background-color: #ccffcc;
  position: absolute;
}

tbody {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="grid-header">
    <table id="callLogExplorer">
      <thead>
        <tr>
          <th>head1</th>
          <th>head2</th>
          <th>head3</th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="grid-body">
    <table>
      <tbody>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

Upvotes: 1

Related Questions