Semantic UI table width

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.

Solution

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>

Comments

[Joseph Goh]

this will only add the vertical scrollbar while the width of the table still resize to the container from semantic