HTML table won't fit inside of bootstrap panel
<p>I am trying to fit a datatable inside of a bootstrap panel that's part of an accordion. However, the table keeps overflowing outside of the panel... could someone help? Here is my code:</p>

<pre><code>&lt;div class="container"&gt;
&lt;div class="myaccordion"&gt;
    &lt;div class="panel-group" id="accordion"&gt;
        &lt;div class="panel panel-default"&gt;
            &lt;div class="panel-heading"&gt;
                &lt;h4 class="panel-title"&gt;
                    &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;Section One&lt;/a&gt;
                &lt;/h4&gt;
            &lt;/div&gt;
            &lt;div id="collapseOne" class="panel-collapse collapse in"&gt;
                &lt;div class="panel-body"&gt;
                    &lt;div class="row"&gt;&lt;!-- company orders --&gt;
                      &lt;div class="container"&gt;
                        &lt;h3&gt;{{context.company.company_name}}'s Orders&lt;/h3&gt;
                        &lt;table id="company_orders" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                    &lt;th&gt;Order Date&lt;/th&gt;
                                      &lt;th&gt;Order ID&lt;/th&gt;
                                      &lt;th&gt;PO #&lt;/th&gt;
                                      &lt;th&gt;Order Total ($)&lt;/th&gt;
                                      &lt;th&gt;Status&lt;/th&gt;
                                      &lt;th&gt;&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                                  {{#each context.order}}
                                  &lt;tr&gt;
                                    &lt;td class="order_date"&gt;{{order_date}}&lt;/td&gt;
                                      &lt;td class="order_id"&gt;{{order_id}}&lt;/td&gt;
                                      &lt;td class="po_num"&gt;{{po_num}}&lt;/td&gt;
                                      &lt;td class="order_total"&gt;{{order_total}}&lt;/td&gt;
                                      &lt;td class="price"&gt;{{order_status}}&lt;/td&gt;
                                      &lt;th&gt;&lt;a href="/admin/{{order_id}}"&gt;View Details&lt;/a&gt;&lt;/th&gt;
                                  &lt;/tr&gt;
                                  {{/each}}
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;&lt;!-- company orders end --&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p><a href="https://i.stack.imgur.com/y2ybZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y2ybZ.png" alt="Image showing table overflow on the right side"></a></p>