Joseph Goh Joseph Goh - 6 months ago 38
CSS Question

Bootstrap table custom width on each column

How to set the width of bootstrap table?

I tried to use

class="col-md-2"
, it does not effect the width. The table class seems to have its width equal to display width.

In my case, i have a lot of information to be displayed through the table which is will exceeded the width of the display, hence i need to have the horizontal scrollbar.

This is the last code i have tried.

<table class="table">
<tr>
<th class="col-md-1">Action</th>
<th class="col-md-2">Description</th>
</tr>
<tr ng-repeat="x in Tablelist track by $index">
<td>
<div class="btn-group">
<button class="btn btn-primary btn-xs" ng-click="Opensetprice(x.id,x.matcode,x.pr_qty)">$</button>
<button class="btn btn-danger btn-xs" ng-click="Delete(x.doc_no,x.item_no, $index)">X</button>
</div>
</td>
<td>{{x.material}}</td>
</tr>
</table>


tried to override the class
table
width with
width:auto;
, does not do any help.

Answer

Give your table parent overflow: auto;