it doesn't work on a scroll able table

[waynelidza]

@Component({ selector: 'my-app', styles: [` .upper { height: 100%; width: 100%; background-color: #fdd; height: auto; overflow-y: auto; overflow-x: hidden; } able.scroll { / width: 100%; / / Optional / / border-collapse: collapse; / border-spacing: 0; border: 2px solid black; }

table.scroll tbody, table.scroll thead { display: block; }

thead tr th { height: 30px; line-height: 30px; / text-align: left; / }

table.scroll tbody { height: 100px; overflow-y: auto; overflow-x: hidden; }

tbody { border-top: 2px solid black; }

tbody td, thead th { / width: 20%; / / Optional / border-right: 1px solid black; / white-space: nowrap; / }

tbody td:last-child, thead th:last-child { border-right: none; } .lower { height: 100%; width: 100%; background-color: #bbb; overflow-y: auto; overflow-x: hidden; }

  .left {
      height: 100%;
      background-color: #ddf;
  }

  .right {
      height: 100%;
      background-color: #dfd;
  }`],

template: `

Split Pane Example

<div style="height:400px; width:800px; border:1px solid #555">
  <div style="height: 100%;">
    <horizontal-split-pane #box1 primary-component-minsize="35" secondary-component-minsize="35" local-storage-key="split-pane" (on-change)="onHChange($event)">
      <div class="split-pane-content-primary">
        <div class="upper">
         <table class="scroll">
<thead>
    <tr>
        <th>Head 1</th>
        <th>Head 2</th>
        <th>Head 3</th>
        <th>Head 4</th>
        <th>Head 5</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
        <td>Content 5</td>
    </tr>
    <tr>
        <td>Content 1</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>Content 3</td>
        <td>Content 4</td>
        <td>Content 5</td>
    </tr>
    <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
        <td>Content 5</td>
    </tr>
    <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
        <td>Content 5</td>
    </tr>
    <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
        <td>Content 5</td>
    </tr>
    <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
        <td>Content 5</td>
    </tr>
    <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
        <td>Content 5</td>
    </tr>
</tbody>