setting bootstrap table going outside accordion

Question

I have one HTML table which I have kept in bootstrap's accordion, I am taking the input from user, whenever input is too long table is getting outside accordion. How can I set width the fixed, and let it expand vertically.

<table id="recordTable" class="table table-bordered table-striped">
                    <thead>
                        <tr>                    
                            <th class="col-md-1">Question Number</th>
                            <th class="col-md-6">Question Text</th>
                            <th class="col-md-3">upload Document(if any)</th>
                            <th class="col-md-1">Document uploaded?</th>

                            <th class="col-md-1">Delete</th>
                        </tr>

                    </thead>

                    <tbody>


                            <tr>
                                <td class="ques_id col-md-1">12  </td>
                                <td class="ques_text col-md-6">asd</td>
                                <td class="ques_file col-md-3"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td>
                                <td class="fileuploadSuccess col-md-1"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>                                 
                                <td class="col-md-1"><a href="#" id="deleteButton" class="btn btn-primary">delete</a></td>
                            </tr>

                            <tr>
                                <td class="ques_id col-md-1">14  </td>
                                <td class="ques_text col-md-6">asd</td>
                                <td class="ques_file col-md-3"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td>
                                <td class="fileuploadSuccess col-md-1"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>                                 
                                <td class="col-md-1"><a href="#" id="deleteButton" class="btn btn-primary">delete</a></td>
                            </tr><tr><td class="ques_id">15</td><td class="ques_text">sdfdfgdfgaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td><td class="ques_file"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td><td class="fileuploadSuccess"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td><td><a href="#" id="deleteButton" class="btn btn-primary">delete</a></td></tr>




                    </tbody>


                </table>

Here is screenshot of the image.

jsfiddle link: https://jsfiddle.net/govi20/obnpjt7h/

Answer 1

add this property word-break: break-all; to td tag

another way add class to table outer element table-responsive

<div class="table-responsive">
  <table class="table table-bordered table-striped">
    ...
  </table>
</div>

https://jsfiddle.net/obnpjt7h/1/