Semantic UI table width - html

Question

I am using semantic ui as the front end framework, i have a table which has around 10 column in it, but the table width is just set to its container while i want it to go over the container and scrollable to right to see other columns.
Here is the code.
<table class="ui fixed single line celled table yellow very compact striped">
<thead>
<tr>
<th>Date</th>
<th>Type</th>
<th>Docno</th>
<th>Itemno</th>
<th>Item Part</th>
<th>Description</th>
<th>Uom</th>
<th>Location</th>
<th>Qty</th>
<th>Supplier</th>
<th>Dono</th>
<th>Prod Loc</th>
<th>Lotno</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data">
<td>{{x.in_date}}</td>
<td>{{x.type}}</td>
<td>{{x.doc_no}}</td>
<td>{{x.item_no}}</td>
<td>{{x.matcode}}</td>
<td>{{x.descr}}</td>
<td>{{x.u_measure}}</td>
<td>{{x.location}}</td>
<td>{{x.in_qty}}</td>
<td>{{x.supp_no}}</td>
<td>{{x.do_no}}</td>
<td>{{x.org}}</td>
<td>{{x.lot_no}}</td>
</tr>
</tbody>
</table>
How to make the table is over its container and need to scroll to right to see other columns content.

Answer 1

First insert your table into a container. Then set a width on this container for example 400 and adjust the height to whatever. Most important is overflow-x:scroll to set a scrollbar on it.
<div id='container' style='height:500px;width:400px;overflow-x:scroll'>
<table></table>
</div>