Problem bootstrap table shows: wrap and roll on the table

  <table class="table table-bordered table-sm">
            <thead>
            <tr>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tbody">
            {% for student in object_list %}
                <tr>
                     <td>
                        <a class="btn btn-sm btn-success" href="{% url 'd3:StudentUpdateChuhe' student.id %}">>A</Prokaryotic
                    </ TD > 

                </ TR > 
            {%}% empty 
                < TR > 
                    < TD colspan = "99" > not retrieved data </ TD > 
                </ TR > 
            {%} endfor% 
            </ tbody > 
        </ Table >

Because it is responsive mode, table of contents inside the automatic folding line, does not look good

 

 

 

modify:

  Key 1: table plus text-nowrap

<table class = "table table- bordered table-striped table-sm text-nowrap"> 
After adding, it does not follow the line, but the screen layout changed, many right stretch. 

Key 2: Add the entire table in the following div

<div style="overflow:scroll;">
   <table class="table table-bordered table-striped table-sm text-nowrap">
      省略

   </table>
</div>