javascript - Grid with freezon last column -

i have create angular grid last column frozen. frozen column summation of row values. last row editable one. problem how create html/css structure. can create angular grid how create html/css structure question. attached screen shot of grid required.

any pointers helpful.

thanks

here solution came : http://jsfiddle.net/anirbankundu/djqpf/1881/

i implemented using 2 ways - have indicated in fiddle more favorable way implement. hope helps html :

    <div id="left">       <h4>left col</h4>       <table>         <tr>           <td>1</td>           <td>2</td>           <td>3</td>           <td>4</td>           <td>5</td>           <td>6</td>           <td>7</td>           <td>8</td>           <td>9</td>           <td>10</td>           <td>11</td>           <td>12</td>           <td>13</td>           <td>14</td>         </tr>         <tr>           <td>1</td>           <td>2</td>           <td>3</td>           <td>4</td>           <td>5</td>           <td>6</td>           <td>7</td>           <td>8</td>           <td>9</td>           <td>10</td>           <td>11</td>           <td>12</td>           <td>13</td>           <td>14</td>         </tr>       </table>     </div>      <div id="right" style="text-align:right;">       <h4>right col</h4>       <table>         <tr>           <td>1</td>         </tr>         <tr>           <td>1</td>         </tr>       </table>     </div>    </div> </div> 

css :

.table-wrapper {   overflow-x: scroll;   overflow-y: visible;   width: 250px; }  td, th {   padding: 5px 20px;   width: 100px; }  th:first-child {   position: fixed;   right: 35% }  #container {   display: table;   width: 100%;   border: 1px solid red; }  #row {   display: table-row; }  #left, #right, #middle {   display: table-cell;   border: 1px solid green; }  #left {   width: 80%;   max-width: 350px;   overflow-x: scroll; }