带有最后一列freezon的网格

Question

我必须创建最后一列冻结的有角网格。冻结列是所有行值的总和。最后一行是可编辑的。我的问题是如何创建HTML/CSS结构。我可以创建角网格，但如何创建HTML/CSS结构是我的问题。附加是所需网格的屏幕截图。

任何指针都非常有帮助。

感谢

Answer 1

这里是我想出了解决方案：http://jsfiddle.net/anirbankundu/DJqPf/1881/

我实现了使用2种方式 - 我在这是为了实现一个更有利的方式摆弄表示。希望帮助 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; 
}