table.html 55 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title></title>
  7. <!-- Bootstrap Styles-->
  8. <link href="assets/css/bootstrap.css" rel="stylesheet" />
  9. <!-- FontAwesome Styles-->
  10. <link href="assets/css/font-awesome.css" rel="stylesheet" />
  11. <!-- Morris Chart Styles-->
  12. <!-- Custom Styles-->
  13. <link href="assets/css/custom-styles.css" rel="stylesheet" />
  14. <!-- Google Fonts-->
  15. <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
  16. <!-- TABLE STYLES-->
  17. <link href="assets/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
  18. </head>
  19. <body>
  20. <div id="wrapper">
  21. <nav class="navbar navbar-default top-navbar" role="navigation">
  22. <div class="navbar-header">
  23. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
  24. <span class="sr-only">Toggle navigation</span>
  25. <span class="icon-bar"></span>
  26. <span class="icon-bar"></span>
  27. <span class="icon-bar"></span>
  28. </button>
  29. <a class="navbar-brand" href="index.html"><i class="fa fa-comments"></i> <strong>MASTER </strong></a>
  30. </div>
  31. <ul class="nav navbar-top-links navbar-right">
  32. <li class="dropdown">
  33. <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
  34. <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
  35. </a>
  36. <ul class="dropdown-menu dropdown-messages">
  37. <li>
  38. <a href="#">
  39. <div>
  40. <strong>John Doe</strong>
  41. <span class="pull-right text-muted">
  42. <em>Today</em>
  43. </span>
  44. </div>
  45. <div>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</div>
  46. </a>
  47. </li>
  48. <li class="divider"></li>
  49. <li>
  50. <a href="#">
  51. <div>
  52. <strong>John Smith</strong>
  53. <span class="pull-right text-muted">
  54. <em>Yesterday</em>
  55. </span>
  56. </div>
  57. <div>Lorem Ipsum has been the industry's standard dummy text ever since an kwilnw...</div>
  58. </a>
  59. </li>
  60. <li class="divider"></li>
  61. <li>
  62. <a href="#">
  63. <div>
  64. <strong>John Smith</strong>
  65. <span class="pull-right text-muted">
  66. <em>Yesterday</em>
  67. </span>
  68. </div>
  69. <div>Lorem Ipsum has been the industry's standard dummy text ever since the...</div>
  70. </a>
  71. </li>
  72. <li class="divider"></li>
  73. <li>
  74. <a class="text-center" href="#">
  75. <strong>Read All Messages</strong>
  76. <i class="fa fa-angle-right"></i>
  77. </a>
  78. </li>
  79. </ul>
  80. <!-- /.dropdown-messages -->
  81. </li>
  82. <!-- /.dropdown -->
  83. <li class="dropdown">
  84. <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
  85. <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
  86. </a>
  87. <ul class="dropdown-menu dropdown-tasks">
  88. <li>
  89. <a href="#">
  90. <div>
  91. <p>
  92. <strong>Task 1</strong>
  93. <span class="pull-right text-muted">60% Complete</span>
  94. </p>
  95. <div class="progress progress-striped active">
  96. <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
  97. <span class="sr-only">60% Complete (success)</span>
  98. </div>
  99. </div>
  100. </div>
  101. </a>
  102. </li>
  103. <li class="divider"></li>
  104. <li>
  105. <a href="#">
  106. <div>
  107. <p>
  108. <strong>Task 2</strong>
  109. <span class="pull-right text-muted">28% Complete</span>
  110. </p>
  111. <div class="progress progress-striped active">
  112. <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100" style="width: 28%">
  113. <span class="sr-only">28% Complete</span>
  114. </div>
  115. </div>
  116. </div>
  117. </a>
  118. </li>
  119. <li class="divider"></li>
  120. <li>
  121. <a href="#">
  122. <div>
  123. <p>
  124. <strong>Task 3</strong>
  125. <span class="pull-right text-muted">60% Complete</span>
  126. </p>
  127. <div class="progress progress-striped active">
  128. <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
  129. <span class="sr-only">60% Complete (warning)</span>
  130. </div>
  131. </div>
  132. </div>
  133. </a>
  134. </li>
  135. <li class="divider"></li>
  136. <li>
  137. <a href="#">
  138. <div>
  139. <p>
  140. <strong>Task 4</strong>
  141. <span class="pull-right text-muted">85% Complete</span>
  142. </p>
  143. <div class="progress progress-striped active">
  144. <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%">
  145. <span class="sr-only">85% Complete (danger)</span>
  146. </div>
  147. </div>
  148. </div>
  149. </a>
  150. </li>
  151. <li class="divider"></li>
  152. <li>
  153. <a class="text-center" href="#">
  154. <strong>See All Tasks</strong>
  155. <i class="fa fa-angle-right"></i>
  156. </a>
  157. </li>
  158. </ul>
  159. <!-- /.dropdown-tasks -->
  160. </li>
  161. <!-- /.dropdown -->
  162. <li class="dropdown">
  163. <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
  164. <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
  165. </a>
  166. <ul class="dropdown-menu dropdown-alerts">
  167. <li>
  168. <a href="#">
  169. <div>
  170. <i class="fa fa-comment fa-fw"></i> New Comment
  171. <span class="pull-right text-muted small">4 min</span>
  172. </div>
  173. </a>
  174. </li>
  175. <li class="divider"></li>
  176. <li>
  177. <a href="#">
  178. <div>
  179. <i class="fa fa-twitter fa-fw"></i> 3 New Followers
  180. <span class="pull-right text-muted small">12 min</span>
  181. </div>
  182. </a>
  183. </li>
  184. <li class="divider"></li>
  185. <li>
  186. <a href="#">
  187. <div>
  188. <i class="fa fa-envelope fa-fw"></i> Message Sent
  189. <span class="pull-right text-muted small">4 min</span>
  190. </div>
  191. </a>
  192. </li>
  193. <li class="divider"></li>
  194. <li>
  195. <a href="#">
  196. <div>
  197. <i class="fa fa-tasks fa-fw"></i> New Task
  198. <span class="pull-right text-muted small">4 min</span>
  199. </div>
  200. </a>
  201. </li>
  202. <li class="divider"></li>
  203. <li>
  204. <a href="#">
  205. <div>
  206. <i class="fa fa-upload fa-fw"></i> Server Rebooted
  207. <span class="pull-right text-muted small">4 min</span>
  208. </div>
  209. </a>
  210. </li>
  211. <li class="divider"></li>
  212. <li>
  213. <a class="text-center" href="#">
  214. <strong>See All Alerts</strong>
  215. <i class="fa fa-angle-right"></i>
  216. </a>
  217. </li>
  218. </ul>
  219. <!-- /.dropdown-alerts -->
  220. </li>
  221. <!-- /.dropdown -->
  222. <li class="dropdown">
  223. <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
  224. <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
  225. </a>
  226. <ul class="dropdown-menu dropdown-user">
  227. <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
  228. </li>
  229. <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
  230. </li>
  231. <li class="divider"></li>
  232. <li><a href="#"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
  233. </li>
  234. </ul>
  235. <!-- /.dropdown-user -->
  236. </li>
  237. <!-- /.dropdown -->
  238. </ul>
  239. </nav>
  240. <!--/. NAV TOP -->
  241. <nav class="navbar-default navbar-side" role="navigation">
  242. <div class="sidebar-collapse">
  243. <ul class="nav" id="main-menu">
  244. <li>
  245. <a href="index.html"><i class="fa fa-dashboard"></i> Dashboard</a>
  246. </li>
  247. <li>
  248. <a href="ui-elements.html"><i class="fa fa-desktop"></i> UI Elements</a>
  249. </li>
  250. <li>
  251. <a href="chart.html"><i class="fa fa-bar-chart-o"></i> Charts</a>
  252. </li>
  253. <li>
  254. <a href="tab-panel.html"><i class="fa fa-qrcode"></i> Tabs & Panels</a>
  255. </li>
  256. <li>
  257. <a href="table.html" class="active-menu"><i class="fa fa-table"></i> Responsive Tables</a>
  258. </li>
  259. <li>
  260. <a href="form.html"><i class="fa fa-edit"></i> Forms </a>
  261. </li>
  262. <li>
  263. <a href="#"><i class="fa fa-sitemap"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>
  264. <ul class="nav nav-second-level">
  265. <li>
  266. <a href="#">Second Level Link</a>
  267. </li>
  268. <li>
  269. <a href="#">Second Level Link</a>
  270. </li>
  271. <li>
  272. <a href="#">Second Level Link<span class="fa arrow"></span></a>
  273. <ul class="nav nav-third-level">
  274. <li>
  275. <a href="#">Third Level Link</a>
  276. </li>
  277. <li>
  278. <a href="#">Third Level Link</a>
  279. </li>
  280. <li>
  281. <a href="#">Third Level Link</a>
  282. </li>
  283. </ul>
  284. </li>
  285. </ul>
  286. </li>
  287. <li>
  288. <a href="empty.html"><i class="fa fa-fw fa-file"></i> Empty Page</a>
  289. </li>
  290. </ul>
  291. </div>
  292. </nav>
  293. <!-- /. NAV SIDE -->
  294. <div id="page-wrapper" >
  295. <div id="page-inner">
  296. <div class="row">
  297. <div class="col-md-12">
  298. <h1 class="page-header">
  299. Tables Page <small>Responsive tables</small>
  300. </h1>
  301. </div>
  302. </div>
  303. <!-- /. ROW -->
  304. <div class="row">
  305. <div class="col-md-12">
  306. <!-- Advanced Tables -->
  307. <div class="panel panel-default">
  308. <div class="panel-heading">
  309. Advanced Tables
  310. </div>
  311. <div class="panel-body">
  312. <div class="table-responsive">
  313. <table class="table table-striped table-bordered table-hover" id="dataTables-example">
  314. <thead>
  315. <tr>
  316. <th>Rendering engine</th>
  317. <th>Browser</th>
  318. <th>Platform(s)</th>
  319. <th>Engine version</th>
  320. <th>CSS grade</th>
  321. </tr>
  322. </thead>
  323. <tbody>
  324. <tr class="odd gradeX">
  325. <td>Trident</td>
  326. <td>Internet Explorer 4.0</td>
  327. <td>Win 95+</td>
  328. <td class="center">4</td>
  329. <td class="center">X</td>
  330. </tr>
  331. <tr class="even gradeC">
  332. <td>Trident</td>
  333. <td>Internet Explorer 5.0</td>
  334. <td>Win 95+</td>
  335. <td class="center">5</td>
  336. <td class="center">C</td>
  337. </tr>
  338. <tr class="odd gradeA">
  339. <td>Trident</td>
  340. <td>Internet Explorer 5.5</td>
  341. <td>Win 95+</td>
  342. <td class="center">5.5</td>
  343. <td class="center">A</td>
  344. </tr>
  345. <tr class="even gradeA">
  346. <td>Trident</td>
  347. <td>Internet Explorer 6</td>
  348. <td>Win 98+</td>
  349. <td class="center">6</td>
  350. <td class="center">A</td>
  351. </tr>
  352. <tr class="odd gradeA">
  353. <td>Trident</td>
  354. <td>Internet Explorer 7</td>
  355. <td>Win XP SP2+</td>
  356. <td class="center">7</td>
  357. <td class="center">A</td>
  358. </tr>
  359. <tr class="even gradeA">
  360. <td>Trident</td>
  361. <td>AOL browser (AOL desktop)</td>
  362. <td>Win XP</td>
  363. <td class="center">6</td>
  364. <td class="center">A</td>
  365. </tr>
  366. <tr class="gradeA">
  367. <td>Gecko</td>
  368. <td>Firefox 1.0</td>
  369. <td>Win 98+ / OSX.2+</td>
  370. <td class="center">1.7</td>
  371. <td class="center">A</td>
  372. </tr>
  373. <tr class="gradeA">
  374. <td>Gecko</td>
  375. <td>Firefox 1.5</td>
  376. <td>Win 98+ / OSX.2+</td>
  377. <td class="center">1.8</td>
  378. <td class="center">A</td>
  379. </tr>
  380. <tr class="gradeA">
  381. <td>Gecko</td>
  382. <td>Firefox 2.0</td>
  383. <td>Win 98+ / OSX.2+</td>
  384. <td class="center">1.8</td>
  385. <td class="center">A</td>
  386. </tr>
  387. <tr class="gradeA">
  388. <td>Gecko</td>
  389. <td>Firefox 3.0</td>
  390. <td>Win 2k+ / OSX.3+</td>
  391. <td class="center">1.9</td>
  392. <td class="center">A</td>
  393. </tr>
  394. <tr class="gradeA">
  395. <td>Gecko</td>
  396. <td>Camino 1.0</td>
  397. <td>OSX.2+</td>
  398. <td class="center">1.8</td>
  399. <td class="center">A</td>
  400. </tr>
  401. <tr class="gradeA">
  402. <td>Gecko</td>
  403. <td>Camino 1.5</td>
  404. <td>OSX.3+</td>
  405. <td class="center">1.8</td>
  406. <td class="center">A</td>
  407. </tr>
  408. <tr class="gradeA">
  409. <td>Gecko</td>
  410. <td>Netscape 7.2</td>
  411. <td>Win 95+ / Mac OS 8.6-9.2</td>
  412. <td class="center">1.7</td>
  413. <td class="center">A</td>
  414. </tr>
  415. <tr class="gradeA">
  416. <td>Gecko</td>
  417. <td>Netscape Browser 8</td>
  418. <td>Win 98SE+</td>
  419. <td class="center">1.7</td>
  420. <td class="center">A</td>
  421. </tr>
  422. <tr class="gradeA">
  423. <td>Gecko</td>
  424. <td>Netscape Navigator 9</td>
  425. <td>Win 98+ / OSX.2+</td>
  426. <td class="center">1.8</td>
  427. <td class="center">A</td>
  428. </tr>
  429. <tr class="gradeA">
  430. <td>Gecko</td>
  431. <td>Mozilla 1.0</td>
  432. <td>Win 95+ / OSX.1+</td>
  433. <td class="center">1</td>
  434. <td class="center">A</td>
  435. </tr>
  436. <tr class="gradeA">
  437. <td>Gecko</td>
  438. <td>Mozilla 1.1</td>
  439. <td>Win 95+ / OSX.1+</td>
  440. <td class="center">1.1</td>
  441. <td class="center">A</td>
  442. </tr>
  443. <tr class="gradeA">
  444. <td>Gecko</td>
  445. <td>Mozilla 1.2</td>
  446. <td>Win 95+ / OSX.1+</td>
  447. <td class="center">1.2</td>
  448. <td class="center">A</td>
  449. </tr>
  450. <tr class="gradeA">
  451. <td>Gecko</td>
  452. <td>Mozilla 1.3</td>
  453. <td>Win 95+ / OSX.1+</td>
  454. <td class="center">1.3</td>
  455. <td class="center">A</td>
  456. </tr>
  457. <tr class="gradeA">
  458. <td>Gecko</td>
  459. <td>Mozilla 1.4</td>
  460. <td>Win 95+ / OSX.1+</td>
  461. <td class="center">1.4</td>
  462. <td class="center">A</td>
  463. </tr>
  464. <tr class="gradeA">
  465. <td>Gecko</td>
  466. <td>Mozilla 1.5</td>
  467. <td>Win 95+ / OSX.1+</td>
  468. <td class="center">1.5</td>
  469. <td class="center">A</td>
  470. </tr>
  471. <tr class="gradeA">
  472. <td>Gecko</td>
  473. <td>Mozilla 1.6</td>
  474. <td>Win 95+ / OSX.1+</td>
  475. <td class="center">1.6</td>
  476. <td class="center">A</td>
  477. </tr>
  478. <tr class="gradeA">
  479. <td>Gecko</td>
  480. <td>Mozilla 1.7</td>
  481. <td>Win 98+ / OSX.1+</td>
  482. <td class="center">1.7</td>
  483. <td class="center">A</td>
  484. </tr>
  485. <tr class="gradeA">
  486. <td>Gecko</td>
  487. <td>Mozilla 1.8</td>
  488. <td>Win 98+ / OSX.1+</td>
  489. <td class="center">1.8</td>
  490. <td class="center">A</td>
  491. </tr>
  492. <tr class="gradeA">
  493. <td>Gecko</td>
  494. <td>Seamonkey 1.1</td>
  495. <td>Win 98+ / OSX.2+</td>
  496. <td class="center">1.8</td>
  497. <td class="center">A</td>
  498. </tr>
  499. <tr class="gradeA">
  500. <td>Gecko</td>
  501. <td>Epiphany 2.20</td>
  502. <td>Gnome</td>
  503. <td class="center">1.8</td>
  504. <td class="center">A</td>
  505. </tr>
  506. <tr class="gradeA">
  507. <td>Webkit</td>
  508. <td>Safari 1.2</td>
  509. <td>OSX.3</td>
  510. <td class="center">125.5</td>
  511. <td class="center">A</td>
  512. </tr>
  513. <tr class="gradeA">
  514. <td>Webkit</td>
  515. <td>Safari 1.3</td>
  516. <td>OSX.3</td>
  517. <td class="center">312.8</td>
  518. <td class="center">A</td>
  519. </tr>
  520. <tr class="gradeA">
  521. <td>Webkit</td>
  522. <td>Safari 2.0</td>
  523. <td>OSX.4+</td>
  524. <td class="center">419.3</td>
  525. <td class="center">A</td>
  526. </tr>
  527. <tr class="gradeA">
  528. <td>Webkit</td>
  529. <td>Safari 3.0</td>
  530. <td>OSX.4+</td>
  531. <td class="center">522.1</td>
  532. <td class="center">A</td>
  533. </tr>
  534. <tr class="gradeA">
  535. <td>Webkit</td>
  536. <td>OmniWeb 5.5</td>
  537. <td>OSX.4+</td>
  538. <td class="center">420</td>
  539. <td class="center">A</td>
  540. </tr>
  541. <tr class="gradeA">
  542. <td>Webkit</td>
  543. <td>iPod Touch / iPhone</td>
  544. <td>iPod</td>
  545. <td class="center">420.1</td>
  546. <td class="center">A</td>
  547. </tr>
  548. <tr class="gradeA">
  549. <td>Webkit</td>
  550. <td>S60</td>
  551. <td>S60</td>
  552. <td class="center">413</td>
  553. <td class="center">A</td>
  554. </tr>
  555. <tr class="gradeA">
  556. <td>Presto</td>
  557. <td>Opera 7.0</td>
  558. <td>Win 95+ / OSX.1+</td>
  559. <td class="center">-</td>
  560. <td class="center">A</td>
  561. </tr>
  562. <tr class="gradeA">
  563. <td>Presto</td>
  564. <td>Opera 7.5</td>
  565. <td>Win 95+ / OSX.2+</td>
  566. <td class="center">-</td>
  567. <td class="center">A</td>
  568. </tr>
  569. <tr class="gradeA">
  570. <td>Presto</td>
  571. <td>Opera 8.0</td>
  572. <td>Win 95+ / OSX.2+</td>
  573. <td class="center">-</td>
  574. <td class="center">A</td>
  575. </tr>
  576. <tr class="gradeA">
  577. <td>Presto</td>
  578. <td>Opera 8.5</td>
  579. <td>Win 95+ / OSX.2+</td>
  580. <td class="center">-</td>
  581. <td class="center">A</td>
  582. </tr>
  583. <tr class="gradeA">
  584. <td>Presto</td>
  585. <td>Opera 9.0</td>
  586. <td>Win 95+ / OSX.3+</td>
  587. <td class="center">-</td>
  588. <td class="center">A</td>
  589. </tr>
  590. <tr class="gradeA">
  591. <td>Presto</td>
  592. <td>Opera 9.2</td>
  593. <td>Win 88+ / OSX.3+</td>
  594. <td class="center">-</td>
  595. <td class="center">A</td>
  596. </tr>
  597. <tr class="gradeA">
  598. <td>Presto</td>
  599. <td>Opera 9.5</td>
  600. <td>Win 88+ / OSX.3+</td>
  601. <td class="center">-</td>
  602. <td class="center">A</td>
  603. </tr>
  604. <tr class="gradeA">
  605. <td>Presto</td>
  606. <td>Opera for Wii</td>
  607. <td>Wii</td>
  608. <td class="center">-</td>
  609. <td class="center">A</td>
  610. </tr>
  611. <tr class="gradeA">
  612. <td>Presto</td>
  613. <td>Nokia N800</td>
  614. <td>N800</td>
  615. <td class="center">-</td>
  616. <td class="center">A</td>
  617. </tr>
  618. <tr class="gradeA">
  619. <td>Presto</td>
  620. <td>Nintendo DS browser</td>
  621. <td>Nintendo DS</td>
  622. <td class="center">8.5</td>
  623. <td class="center">C/A<sup>1</sup>
  624. </td>
  625. </tr>
  626. <tr class="gradeC">
  627. <td>KHTML</td>
  628. <td>Konqureror 3.1</td>
  629. <td>KDE 3.1</td>
  630. <td class="center">3.1</td>
  631. <td class="center">C</td>
  632. </tr>
  633. <tr class="gradeA">
  634. <td>KHTML</td>
  635. <td>Konqureror 3.3</td>
  636. <td>KDE 3.3</td>
  637. <td class="center">3.3</td>
  638. <td class="center">A</td>
  639. </tr>
  640. <tr class="gradeA">
  641. <td>KHTML</td>
  642. <td>Konqureror 3.5</td>
  643. <td>KDE 3.5</td>
  644. <td class="center">3.5</td>
  645. <td class="center">A</td>
  646. </tr>
  647. <tr class="gradeX">
  648. <td>Tasman</td>
  649. <td>Internet Explorer 4.5</td>
  650. <td>Mac OS 8-9</td>
  651. <td class="center">-</td>
  652. <td class="center">X</td>
  653. </tr>
  654. <tr class="gradeC">
  655. <td>Tasman</td>
  656. <td>Internet Explorer 5.1</td>
  657. <td>Mac OS 7.6-9</td>
  658. <td class="center">1</td>
  659. <td class="center">C</td>
  660. </tr>
  661. <tr class="gradeC">
  662. <td>Tasman</td>
  663. <td>Internet Explorer 5.2</td>
  664. <td>Mac OS 8-X</td>
  665. <td class="center">1</td>
  666. <td class="center">C</td>
  667. </tr>
  668. <tr class="gradeA">
  669. <td>Misc</td>
  670. <td>NetFront 3.1</td>
  671. <td>Embedded devices</td>
  672. <td class="center">-</td>
  673. <td class="center">C</td>
  674. </tr>
  675. <tr class="gradeA">
  676. <td>Misc</td>
  677. <td>NetFront 3.4</td>
  678. <td>Embedded devices</td>
  679. <td class="center">-</td>
  680. <td class="center">A</td>
  681. </tr>
  682. <tr class="gradeX">
  683. <td>Misc</td>
  684. <td>Dillo 0.8</td>
  685. <td>Embedded devices</td>
  686. <td class="center">-</td>
  687. <td class="center">X</td>
  688. </tr>
  689. <tr class="gradeX">
  690. <td>Misc</td>
  691. <td>Links</td>
  692. <td>Text only</td>
  693. <td class="center">-</td>
  694. <td class="center">X</td>
  695. </tr>
  696. <tr class="gradeX">
  697. <td>Misc</td>
  698. <td>Lynx</td>
  699. <td>Text only</td>
  700. <td class="center">-</td>
  701. <td class="center">X</td>
  702. </tr>
  703. <tr class="gradeC">
  704. <td>Misc</td>
  705. <td>IE Mobile</td>
  706. <td>Windows Mobile 6</td>
  707. <td class="center">-</td>
  708. <td class="center">C</td>
  709. </tr>
  710. <tr class="gradeC">
  711. <td>Misc</td>
  712. <td>PSP browser</td>
  713. <td>PSP</td>
  714. <td class="center">-</td>
  715. <td class="center">C</td>
  716. </tr>
  717. <tr class="gradeU">
  718. <td>Other browsers</td>
  719. <td>All others</td>
  720. <td>-</td>
  721. <td class="center">-</td>
  722. <td class="center">U</td>
  723. </tr>
  724. </tbody>
  725. </table>
  726. </div>
  727. </div>
  728. </div>
  729. <!--End Advanced Tables -->
  730. </div>
  731. </div>
  732. <!-- /. ROW -->
  733. <div class="row">
  734. <div class="col-md-6">
  735. <!-- Kitchen Sink -->
  736. <div class="panel panel-default">
  737. <div class="panel-heading">
  738. Kitchen Sink
  739. </div>
  740. <div class="panel-body">
  741. <div class="table-responsive">
  742. <table class="table table-striped table-bordered table-hover">
  743. <thead>
  744. <tr>
  745. <th>#</th>
  746. <th>First Name</th>
  747. <th>Last Name</th>
  748. <th>Username</th>
  749. </tr>
  750. </thead>
  751. <tbody>
  752. <tr>
  753. <td>1</td>
  754. <td>Mark</td>
  755. <td>Otto</td>
  756. <td>@mdo</td>
  757. </tr>
  758. <tr>
  759. <td>2</td>
  760. <td>Jacob</td>
  761. <td>Thornton</td>
  762. <td>@fat</td>
  763. </tr>
  764. <tr>
  765. <td>3</td>
  766. <td>Larry</td>
  767. <td>the Bird</td>
  768. <td>@twitter</td>
  769. </tr>
  770. </tbody>
  771. </table>
  772. </div>
  773. </div>
  774. </div>
  775. <!-- End Kitchen Sink -->
  776. </div>
  777. <div class="col-md-6">
  778. <!-- Basic Table -->
  779. <div class="panel panel-default">
  780. <div class="panel-heading">
  781. Basic Table
  782. </div>
  783. <div class="panel-body">
  784. <div class="table-responsive">
  785. <table class="table">
  786. <thead>
  787. <tr>
  788. <th>#</th>
  789. <th>First Name</th>
  790. <th>Last Name</th>
  791. <th>Username</th>
  792. </tr>
  793. </thead>
  794. <tbody>
  795. <tr>
  796. <td>1</td>
  797. <td>Mark</td>
  798. <td>Otto</td>
  799. <td>@mdo</td>
  800. </tr>
  801. <tr>
  802. <td>2</td>
  803. <td>Jacob</td>
  804. <td>Thornton</td>
  805. <td>@fat</td>
  806. </tr>
  807. <tr>
  808. <td>3</td>
  809. <td>Larry</td>
  810. <td>the Bird</td>
  811. <td>@twitter</td>
  812. </tr>
  813. </tbody>
  814. </table>
  815. </div>
  816. </div>
  817. </div>
  818. <!-- End Basic Table -->
  819. </div>
  820. </div>
  821. <!-- /. ROW -->
  822. <div class="row">
  823. <div class="col-md-6">
  824. <!-- Striped Rows Table -->
  825. <div class="panel panel-default">
  826. <div class="panel-heading">
  827. Striped Rows Table
  828. </div>
  829. <div class="panel-body">
  830. <div class="table-responsive">
  831. <table class="table table-striped">
  832. <thead>
  833. <tr>
  834. <th>#</th>
  835. <th>First Name</th>
  836. <th>Last Name</th>
  837. <th>Username</th>
  838. </tr>
  839. </thead>
  840. <tbody>
  841. <tr>
  842. <td>1</td>
  843. <td>Mark</td>
  844. <td>Otto</td>
  845. <td>@mdo</td>
  846. </tr>
  847. <tr>
  848. <td>2</td>
  849. <td>Jacob</td>
  850. <td>Thornton</td>
  851. <td>@fat</td>
  852. </tr>
  853. <tr>
  854. <td>3</td>
  855. <td>Larry</td>
  856. <td>the Bird</td>
  857. <td>@twitter</td>
  858. </tr>
  859. </tbody>
  860. </table>
  861. </div>
  862. </div>
  863. </div>
  864. <!-- End Striped Rows Table -->
  865. </div>
  866. <div class="col-md-6">
  867. <!-- Bordered Table -->
  868. <div class="panel panel-default">
  869. <div class="panel-heading">
  870. Bordered Table
  871. </div>
  872. <!-- /.panel-heading -->
  873. <div class="panel-body">
  874. <div class="table-responsive table-bordered">
  875. <table class="table">
  876. <thead>
  877. <tr>
  878. <th>#</th>
  879. <th>First Name</th>
  880. <th>Last Name</th>
  881. <th>Username</th>
  882. </tr>
  883. </thead>
  884. <tbody>
  885. <tr>
  886. <td>1</td>
  887. <td>Mark</td>
  888. <td>Otto</td>
  889. <td>@mdo</td>
  890. </tr>
  891. <tr>
  892. <td>2</td>
  893. <td>Jacob</td>
  894. <td>Thornton</td>
  895. <td>@fat</td>
  896. </tr>
  897. <tr>
  898. <td>3</td>
  899. <td>Larry</td>
  900. <td>the Bird</td>
  901. <td>@twitter</td>
  902. </tr>
  903. </tbody>
  904. </table>
  905. </div>
  906. </div>
  907. </div>
  908. <!-- End Bordered Table -->
  909. </div>
  910. </div>
  911. <!-- /. ROW -->
  912. <div class="row">
  913. <div class="col-md-6">
  914. <!-- Hover Rows -->
  915. <div class="panel panel-default">
  916. <div class="panel-heading">
  917. Hover Rows
  918. </div>
  919. <div class="panel-body">
  920. <div class="table-responsive">
  921. <table class="table table-hover">
  922. <thead>
  923. <tr>
  924. <th>#</th>
  925. <th>First Name</th>
  926. <th>Last Name</th>
  927. <th>Username</th>
  928. </tr>
  929. </thead>
  930. <tbody>
  931. <tr>
  932. <td>1</td>
  933. <td>Mark</td>
  934. <td>Otto</td>
  935. <td>@mdo</td>
  936. </tr>
  937. <tr>
  938. <td>2</td>
  939. <td>Jacob</td>
  940. <td>Thornton</td>
  941. <td>@fat</td>
  942. </tr>
  943. <tr>
  944. <td>3</td>
  945. <td>Larry</td>
  946. <td>the Bird</td>
  947. <td>@twitter</td>
  948. </tr>
  949. </tbody>
  950. </table>
  951. </div>
  952. </div>
  953. </div>
  954. <!-- End Hover Rows -->
  955. </div>
  956. <div class="col-md-6">
  957. <!-- Context Classes -->
  958. <div class="panel panel-default">
  959. <div class="panel-heading">
  960. Context Classes
  961. </div>
  962. <div class="panel-body">
  963. <div class="table-responsive">
  964. <table class="table">
  965. <thead>
  966. <tr>
  967. <th>#</th>
  968. <th>First Name</th>
  969. <th>Last Name</th>
  970. <th>Username</th>
  971. </tr>
  972. </thead>
  973. <tbody>
  974. <tr class="success">
  975. <td>1</td>
  976. <td>Mark</td>
  977. <td>Otto</td>
  978. <td>@mdo</td>
  979. </tr>
  980. <tr class="info">
  981. <td>2</td>
  982. <td>Jacob</td>
  983. <td>Thornton</td>
  984. <td>@fat</td>
  985. </tr>
  986. <tr class="warning">
  987. <td>3</td>
  988. <td>Larry</td>
  989. <td>the Bird</td>
  990. <td>@twitter</td>
  991. </tr>
  992. <tr class="danger">
  993. <td>4</td>
  994. <td>John</td>
  995. <td>Smith</td>
  996. <td>@jsmith</td>
  997. </tr>
  998. </tbody>
  999. </table>
  1000. </div>
  1001. </div>
  1002. </div>
  1003. <!-- end Context Classes -->
  1004. </div>
  1005. </div>
  1006. <!-- /. ROW -->
  1007. </div>
  1008. <footer><p>Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p></footer>
  1009. </div>
  1010. <!-- /. PAGE INNER -->
  1011. </div>
  1012. <!-- /. PAGE WRAPPER -->
  1013. <!-- /. WRAPPER -->
  1014. <!-- JS Scripts-->
  1015. <!-- jQuery Js -->
  1016. <script src="assets/js/jquery-1.10.2.js"></script>
  1017. <!-- Bootstrap Js -->
  1018. <script src="assets/js/bootstrap.min.js"></script>
  1019. <!-- Metis Menu Js -->
  1020. <script src="assets/js/jquery.metisMenu.js"></script>
  1021. <!-- DATA TABLE SCRIPTS -->
  1022. <script src="assets/js/dataTables/jquery.dataTables.js"></script>
  1023. <script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
  1024. <script>
  1025. $(document).ready(function () {
  1026. $('#dataTables-example').dataTable();
  1027. });
  1028. </script>
  1029. <!-- Custom Js -->
  1030. <script src="assets/js/custom-scripts.js"></script>
  1031. </body>
  1032. </html>