title: HTML table won't fit inside of bootstrap panel
body: <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>