Динамические столбцы фиксированной длины с автоматической прокруткой

Question

Я использую угловой JS 1,3 здесь. То, что у меня есть, - это модальное меню, которое при нажатии добавляет столбец к существующей таблице, имя столбца основывается на выборе, сделанном в модальном режиме. Здесь можно добавить столько столбцов. Все это прекрасно работает. Моя проблема в том, что я не уверен, как сохранить фиксированную ширину столбца и прокрутку.

Ширина столбца продолжает уменьшаться, когда добавляется больше столбцов, и даже прокрутка не отображается должным образом. Извините, кода много, поэтому просто отправьте код вместе с jsfiddle здесь:

http://jsfiddle.net/aman1981/u1vbeos5/107/

 <div class="panel-body">
    <table class="table table-bordered">
      <colgroup>
        <col class="unique-id">
      </colgroup>
      <thead>
        <tr>
          <th class="unique-id">Name #</th>
          <th contenteditable="true" ng-repeat="c in targetTable.columns" ng-model="c.label"></th>
          <!--<th class="view-next-set"><a href="#">...</a></th>-->
          <td class="center add-column"><a href ng-click="open()">+ Add Column</a></td>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="r in targetTable.rows">
          <td contenteditable="true" class=""></td>
          <td contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-blur="!r.id? addNewRow(r[column.id], r): undefined"></td>
          <!--<td class="blank" colspan="2"></td>-->
        </tr>
      </tbody>
    </table>
  </div>

Также вот изображение:

https://imgur.com/a/qCn1AO7

Answer 1

Вы должны установить минимальную ширину и максимальную ширину на th и oveflow: автоматически на .panel-body .... Проверьте ниже CSS

.table th {
  max-width: 120px;
  min-width: 120px;
}
.panel-body{
  overflow: auto;
}

Answer 2

В итоге я добавил следующие классы к TD и Panel:

.fixed-width {
    min-width: 50px !important;    
    width: 50px !important;
 }

 .panel-body {
    overflow: auto;
}

Answer 3

Таким образом, вы можете установить минимальную ширину для ваших .table td и .table th

.table td,
.table th {
  min-width: 120px;
}

И вы можете установить overflow из вас .panel-body как auto:

.panel-body {
    overflow: auto;
}

http://jsfiddle.net/u1vbeos5/116/