Semantic UI table width
<p>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.</p>

<p>Here is the code.</p>

<pre class="lang-html prettyprint-override"><code>&lt;table class="ui fixed single line celled table yellow very compact striped"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Date&lt;/th&gt;
      &lt;th&gt;Type&lt;/th&gt;
      &lt;th&gt;Docno&lt;/th&gt;
      &lt;th&gt;Itemno&lt;/th&gt;
      &lt;th&gt;Item Part&lt;/th&gt;
      &lt;th&gt;Description&lt;/th&gt;
      &lt;th&gt;Uom&lt;/th&gt;
      &lt;th&gt;Location&lt;/th&gt;
      &lt;th&gt;Qty&lt;/th&gt;
      &lt;th&gt;Supplier&lt;/th&gt;
      &lt;th&gt;Dono&lt;/th&gt;
      &lt;th&gt;Prod Loc&lt;/th&gt;
      &lt;th&gt;Lotno&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr ng-repeat="x in data"&gt;
      &lt;td&gt;{{x.in_date}}&lt;/td&gt;
      &lt;td&gt;{{x.type}}&lt;/td&gt;
      &lt;td&gt;{{x.doc_no}}&lt;/td&gt;
      &lt;td&gt;{{x.item_no}}&lt;/td&gt;
      &lt;td&gt;{{x.matcode}}&lt;/td&gt;
      &lt;td&gt;{{x.descr}}&lt;/td&gt;
      &lt;td&gt;{{x.u_measure}}&lt;/td&gt;
      &lt;td&gt;{{x.location}}&lt;/td&gt;
      &lt;td&gt;{{x.in_qty}}&lt;/td&gt;
      &lt;td&gt;{{x.supp_no}}&lt;/td&gt;
      &lt;td&gt;{{x.do_no}}&lt;/td&gt;
      &lt;td&gt;{{x.org}}&lt;/td&gt;
      &lt;td&gt;{{x.lot_no}}&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>How to make the table is over its container and need to scroll to right to see other columns content.</p>