Looking to set a maximum width for my table using the size attribute in the <table> tag. However, the table keeps stretching horizontally and causing a bottom scroll bar to appear. Even after refreshing the page or making changes in the console, nothing seems to change. The data is retrieved from a static source using Angular, and I want to ensure that the logs are displayed perfectly.
HTML:
<div class="table_content" ng-app="errorsApp" ng-controller="mainController">
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" ng-model="searchCritical">
</div>
</div>
</form>
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>
... Insert table header code here ...
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="error in errors | orderBy:sortType:sortReverse | filter:searchError">
<td>{{ error.id }}</td>
<td>{{ error.errorname }}</td>
<td>{{ error.date }}</td>
<td><input type="checkbox" ng-checked="item.isRowSelected" ng-click="toggleSelection(item)" /></td>
</tr>
</tbody>
</table>
<button id="button2id" name="button2id" class="btn btn-danger">Scary Button</button>
</div>
Errors.js:
angular.module('errorsApp', [])
.controller('mainController', function($scope) {
... Insert controller code here ...
});
CSS:
html,body {
... Insert CSS styling code here ...
}
https://i.sstatic.net/pHO4H.pnghttps://i.sstatic.net/gZNgO.png