帶有最後一列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; 
}