it doesn't work on a scroll able table

[waynelidza]

No description provided.

[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

<horizontal-split-pane #box1 primary-component-minsize="35" secondary-component-minsize="35" local-storage-key="split-pane" (on-change)="onHChange($event)">

Head 1	Head 2	Head 3	Head 4	Head 5
Content 1	Content 2	Content 3	Content 4	Content 5
Content 1	Lorem ipsum dolor sit amet.	Content 3	Content 4	Content 5
Content 1	Content 2	Content 3	Content 4	Content 5
Content 1	Content 2	Content 3	Content 4	Content 5
Content 1	Content 2	Content 3	Content 4	Content 5
Content 1	Content 2	Content 3	Content 4	Content 5
Content 1	Content 2	Content 3	Content 4	Content 5

Left

Right

`,