Rishi Rishi - 12 days ago 8
CSS Question

HTML Datatable : Table row is going outside

I have data table.
when I resize it below 860px then It is going outside table. I have total 8 table header but 8th header is going outside the table when I resize the window.

Here is the Image



<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>saumil12346678@gmail.com</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>





Here is JSFiddle

Any help would be great.
Thank You.

Answer

You fixed the width of your table to 1200px and all your th to 150px so no matter the size of your screen the size of your table won't change

Since you are using bootstrap you should put your table inside a div and giv the div a class table-responsive

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

See documentation here