Javascript 最后一列为freezon的网格

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

    <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>

任何提示都非常有用

    <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>

谢谢

    <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>

---

以下是我提出的解决方案：

    <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>

我使用了两种方法来实现——我在小提琴中指出了哪种方法更适合实现。希望有帮助 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>

---

只需考虑两个div列，每个列都有自己的表。一个div有

overflow-y:scroll

和表中的许多列，另一个表只有一列做了一些快速的事情-只是想看看这是否是一个解决方案：@charlietfl感谢您的伟大建议-它很有效！我将很快发布我的答案