HTML Datatable: строка таблицы выходит за пределы

У меня есть таблица данных. , когда я изменяю его размер ниже 860px Затем он выходит за стол. У меня есть общее число заголовок таблицы, но 8-й заголовок выходит за стол, когда я изменяю размер окна.HTML Datatable: строка таблицы выходит за пределы

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="panel panel-default"> <div class="row"><div class="col-sm-12 col-md-12"><table ui-jq="dataTable" class="table table-striped b-t b-b dataTable no-footer" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info"> 
 
        <thead> 
 
         <tr role="row" class="font-bold text-center no_border"> 
 
          <th style="width: 150px;" class="sorting_asc no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Rendering engine: activate to sort column descendig" aria-sort="ascending">Name</th> 
 
          <th style="width: 150px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Emai Id</th> 
 
          <th style="width: 100px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending">Seq No</th> 
 
          <th style="width: 200px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Ticket Type</th> 
 
          <th style="width: 150px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Amount</th> 
 
          <th style="width: 50px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Paid</th> 
 
          <th style="width: 150px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Order Date</th> 
 
          <th style="width: 150px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Payment Order</th> 
 
          <!--<th style="width: 120px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Payment</th>--> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
        <tr role="row" class="odd"> 
 
         <td class="sorting_1"> 
 
          <img src="images/image.png" class="img-circle vertical_align_middle" width="35" height="35"><span class="margin_left_30">Saumil</span> 
 
         </td> 
 
         <td>[email protected]</td> 
 
         <td>VGA 1001</td> 
 
         <td>Lark - Super Early Bird</td> 
 
         <td>INR 1000</td> 
 
         <td>YES</td> 
 
         <td>30th November 2016</td> 
 
         <td><button type="button" class="btn btn-success">Refund</button> </td> 
 
        </tr> 
 

 
        </table></div></div> 
 
        </div>

Вот JSFiddle

Любая помощь будет большим. Спасибо.

источник

2016-11-28 Anonymous

данные достигает свою минимальную ширину, что он может, а затем выпрыгивает из таблицы, я испытал это может быть перед вами вам нужно будет определить минимальную ширину для вашей таблицы или включить горизонтальную прокрутку. –

Это потому, что ширина вашего стола не может покрыть общую ширину вашего . Попробуйте удалить фиксированную ширину для . И дайте свиток переполнениюX –

Вы исправили ширину вашего стола, чтобы 1200px и все ваши го по 150px так независимо от размера вашего экрана размера вашего стола не изменится

Поскольку вы используете загрузчик, вы должны поместить таблицу внутри DIV и GIV Диву собой класс таблицу реагирующих

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

See documentation here

источник

2016-11-28 07:05:12 Chiller

ой, да ... это получилось .. на самом деле я использовал его в своем коде, но не знаю, что кто-то из моих коллег удалил его .. Большое вам спасибо ... :), принимаю ваш ответ в 2 мин. –

Я рад, что это помогло :) – Chiller

HTML Datatable: строка таблицы выходит за пределы

ответ

Смежные вопросы