設置手風琴外的引導表

Question

我有一個我在bootstrap手風琴中保存的HTML表，我從用戶那裏得到輸入，每當輸入太長時表手錶就是手風琴以外。我如何設置固定寬度，並讓它垂直展開。

<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> 

這是圖像的屏幕截圖。

的jsfiddle鏈接：https://jsfiddle.net/govi20/obnpjt7h/

Answer 1

添加該屬性word-break: break-all;到td標籤

另一種方式添加類表外元素table-responsive

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

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