ServiceNow Table Variable Widget Amendment - html

Question

I have found a widget on ServiceNow share that allows you to add a table set of variables and then dynamically get the user to add multiple rows. We would like to use this, however our requirements are to have around 25 variables as columns in the table.
On this widget once you get past 10 columns, it starts to truncate the width of the columns, and this continues until they are too small to be useable. Once you get past 20 columns it starts to add further columns outside of the window. I was wondering how we could amend this widget to stop the columns width truncating and then once you reach the limit of the container for a horizontal scroll bar to appear. Below is the HTML of the Widget:
<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>
This is the 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;}
}