ServiceNow表变量小组件修正

Question

我在ServiceNow共享上找到了一个小部件，它允许您添加一组变量表，然后动态地让用户添加多行。我们想使用它，但是我们的要求是在表中有大约25个变量作为列 在此小部件上，一旦超过10列，它就会开始截断列的宽度，并且这一直持续到它们太小而无法使用。一旦超过20列，它就会开始在窗口外添加更多列。我想知道如何修改此小部件以停止列宽度截断，然后一旦达到容器的限制就会出现水平滚动条。下面是Widget的HTML：

    <fieldset class="form-group form-group-has-focus" ng-class="{'edit_mode':edit_mode}">

  <label ng-if="data.title != ''" class="field-label" style="display:block;">
    <span class="field-decorations">
      <span ng-show="data.is_mandatory" style="padding-right: .25em" title="${Mandatory}" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': mandatory_filled()}" aria-hidden="false"></span>
    </span>
    {{data.title}}
    <a ng-if="data.can_edit" ng-hide="edit_mode" class="pull-right" href="javascript:void(0)" ng-click="goToEditMode()">
      <i title="Edit Table" class="fa fa-pencil-square-o"></i>
    </a>
  </label>

  <div ng-if="edit_mode">
    <div class="alert alert-warning" ng-if="!data.columns_specified">
      No table definition provided, define your table information and then click Setup Data Table to start building the table definition record
    </div>
    <div class="form-group row">
      <label class="col-sm-2 col-form-label" for="columnLength">Table Label</label>
      <div class="col-sm-10">
        <input class="form-control" ng-model="data.title" type="text" />
      </div>
    </div>
    <div class="form-group row">
      <label class="col-sm-2 col-form-label" for="columnLength">Number of Rows to Display</label>
      <div class="col-sm-10">
        <input class="form-control" ng-model="data.table_options.row_count" type="number" />
      </div>
    </div>
    <div class="form-group row">
      <label class="col-sm-2 col-form-label" for="columnLength">Max Number of Rows (set to -1 for infinite)</label>
      <div class="col-sm-10">
        <input class="form-control" ng-model="data.table_options.max_rows" type="number" />
      </div>
    </div>
    <div class="form-group row">
      <label class="col-sm-2 col-form-label" for="columnLength">Allow new Rows</label>
      <div class="col-sm-10">
        <input ng-model="data.table_options.allow_row_add" type="checkbox" />
      </div>
    </div>

    <button ng-if="temp_columns.length > 0" ng-disabled="data.title==''" ng-click="setupTable()" class="btn btn-primary">Setup Data Table</button>    

  </div>

  <div ng-if="!edit_mode && data.columns_specified">
    <table wt-responsive-table>
        <tbody>
            <tr>
            <th ng-repeat="tableHeader in data.table_options.fields|filter:{'visible':true}">
                {{tableHeader.label}}
                <span class="field-decorations">
                <span ng-show="tableHeader.mandatory" style="padding-left: .25em" title="${Mandatory}" class="fa fa-asterisk mandatory" aria-hidden="false"></span>
                </span>
            </th>
            </tr>
            <tr ng-repeat="(rowID,rowCounter) in table_data" id="tableRow_{{rowCounter.number}}">
            <td ng-repeat="(columnID,field) in rowCounter.fields" ng-if="isVisibleColumn(columnID)" class="column-data">
                <div class="form-group" ng-class="{'has-success' : field.value != ''}">
                <jb-tablevar-column field="field" data="data" c="c" table_data="table_data" rowid="rowID" columnid="columnID" run-on-change="runOnChange" parse-reference-qual="parseReferenceQual"></jb-tablevar-column>
                </div>
            </td>
            <td ng-if="$index > 0">
                <a class="remove-row-link" href="javascript:void(0);" ng-click="deleteRow(rowID)">
                <i title="{{data.table_options.remove_row_title}}" class="fa fa-minus-circle fa-2x remove-row"></i>
                </a>
                <button class="remove-row-btn btn btn-danger" ng-click="deleteRow(rowID)">
                {{data.table_options.remove_row_title}}
                </button>
            </td>
            </tr>
        <tbody>
    </table>
    <div ng-if="((data.table_options.row_count < data.table_options.max_rows) || data.table_options.max_rows == -1) && data.table_options.allow_row_add">
      <button ng-click="addRow()" class="btn btn-primary">{{data.table_options.add_row_title}}</button>
    </div>

  </div>

</fieldset>

这是CSS：

fieldset.edit_mode {
  border-left:10px solid #dedede;
  padding-left:10px;
}
.has-success .form-control-success {
  background-image: url("JB_GreenTick.pngx");
}

.form-control-danger, .form-control-success, .form-control-warning {
  padding-right: 2.25rem;
  background-repeat: no-repeat;
  background-position: center right .625rem;
  -webkit-background-size: 1.25rem 1.25rem;
  background-size: 1.25rem 1.25rem;
}

i.remove-row {
  padding: 0px 5px 20px;
  color: #a0303c;
  cursor: pointer;
}

button.remove-row-btn {
  display:none;
}

.responsive td .form-group {
  padding-left:5px;
  padding-right:5px;
}



@media only screen and (max-width: 600px) {
  .responsive tr{margin-top: 5px;}
  a.remove-row-link {display:none;}
  button.remove-row-btn {display:block;}
  }