CODEWITHSUNDEEP
htmlcsssemantic-ui
Joseph
Joseph

Reputation: 733

Semantic UI table width

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.

Upvotes: 2

Views: 11721

Answers (1)

Shai UI
Shai UI

Reputation: 51918

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>

Upvotes: 2

Related Questions