Question

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

任何指针都非常有用。

由于

Answer 1

以下是我提出的解决方案：http://jsfiddle.net/anirbankundu/DJqPf/1881/

我使用了两种方式实现 - 我已经在小提琴中指出这是一种更有利的实施方式。希望有所帮助 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;
}

网格与freezon最后一栏

1 个答案: