Reference bootstrap and
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<div class="container"> <div class="row"> <div class="col-lg-12"> <div class="panel-body"> <div class="table-responsive"> <table class="table table-hover table-striped table-bordered"> <thead> <tr> <th> A </th> <th> B </th> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> 2 </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> |
if you want to add by jQuery use
|
1 |
$("p").addClass("table table-hover table-striped table-bordered table-striped"); |
for fixed header with data table
#references
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script src="../Scripts/jquery-2.1.4.min.js" type="text/javascript"></script> <script src="../Scripts/moment.min.js" type="text/javascript"></script> <script src="../Scripts/bootstrap.min.js" type="text/javascript"></script> <script src="../Scripts/bootstrap-datepicker.min.js" type="text/javascript"></script> <link href="../Styles/custom.css" rel="stylesheet" type="text/css" /> <link href="../Styles/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="../Styles/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" /> <%--<link href="../Styles/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css" />--%> <link href="../Styles/jquery.dataTables.min.css" rel="stylesheet" type="text/css" /> <script src="../Scripts/jquery.dataTables.min.js" type="text/javascript"></script> <script src="../Scripts/dataTables.bootstrap.js" type="text/javascript"></script> <link href="../Styles/fixed-header.css" rel="stylesheet" type="text/css" /> <script src="../Scripts/fixed-header.js" type="text/javascript"></script> |
and
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div class="row"> <div class="col-lg-12"> <fieldset class="scheduler-border"> <legend class="scheduler-border">Report</legend> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> Ac Warranty Vs Non-Warranty Report </h3> </div> <div class="panel-body"> <div class="table-responsive"> <asp:GridView ID="grdvFoc" runat="server" ClientIDMode="Static"> </asp:GridView> </div> </div> </div> </fieldset> </div> </div> <script> $(function () { $("#grdvFoc").dataTable({ "aaSorting": [], "bPaginate": false, fixedHeader: true }); $('#grdvFoc').addClass("table table-hover table-striped table-bordered "); }) </script> |