API tools faq
paste
Advertisement
Willcode4cash

True responsive tables

Willcode4cash
May 11th, 2017
119
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.85 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <!--[if IE 8 ]>    <html lang="en" class="no-js lt-ie9 lt-ie8"> <![endif]-->
  3. <!--[if IE 9 ]>    <html lang="en" class="no-js lt-ie9> <![endif]-->
  4. <!--[if (gt IE 9)|!(IE)]><!-->
  5. <html lang="en">
  6. <!--<![endif]-->
  7. <head>
  8.     <title>Base Site Page</title>
  9.     <meta charset="utf-8" />
  10.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  11.     <meta name="viewport" content="width=device-width, initial-scale=1">
  12.     <meta name="description" content="">
  13.     <meta name="keywords" content="">
  14.     <meta name="author" content="">
  15.  
  16.     <link href="https://code.jquery.com/ui/1.11.4/themes/flick/jquery-ui.css" rel="stylesheet">
  17.     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  18.     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
  19.     <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700" rel="stylesheet">
  20.     <link href="https://cdnjs.cloudflare.com/ajax/libs/alertifyjs-alertify.js/1.0.10/css/alertify.css" rel="stylesheet">
  21.     <style>
  22.         /**********************************************************************
  23.          * Standard HTML tags and classes
  24.          **********************************************************************/
  25.         body { padding: 0; margin: 20px 10px; font-family: "Roboto Condensed", sans-serif; font-size: 13px; }
  26.         .float-right { float: right; }
  27.         .float-left { float: left; }
  28.  
  29.         /**********************************************************************
  30.          * Start responsive table handling
  31.          **********************************************************************/
  32.         table { border-collapse: collapse; width: 100%; }
  33.         th { background-color: #eee; font-weight: bold; }
  34.         th,td { border: 0.125em solid #333; line-height: 1.5; padding: 0.75em; text-align: left; }
  35.  
  36.         /* Stack rows vertically on small screens */
  37.         @media (max-width: 30em) {
  38.             /* Hide column labels */
  39.             thead tr { position: absolute; top: -9999em; left: -9999em; }
  40.             tr { border: 0.125em solid #333; border-bottom: 0; }
  41.            
  42.             /* Leave a space between table rows */
  43.             tr + tr { margin-top: 1.5em; }
  44.            
  45.             /* Get table cells to act like rows */
  46.             tr,td { display: block; }
  47.             td { border: none; border-bottom: 0.125em solid #333; padding-left: 50%; }
  48.            
  49.             /* Add data labels */
  50.             td:before { content: attr(data-label); display: inline-block; font-weight: bold; line-height: 1.5; margin-left: -100%; width: 100%; }
  51.         }
  52.  
  53.         /* Stack labels vertically on smaller screens */
  54.         @media (max-width: 20em) {
  55.             td { padding-left: 0.75em; }
  56.             td:before { display: block; margin-bottom: 0.75em; margin-left: 0; }
  57.         }        
  58.     </style>
  59.  
  60.     <link href="css/responsive_table.css" rel="stylesheet">
  61.  
  62.     <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
  63.     <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
  64.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  65.     <script src="https://cdnjs.cloudflare.com/ajax/libs/alertifyjs-alertify.js/1.0.10/js/alertify.js"></script>
  66.     <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
  67.     <script>
  68.         $(document).ready(function() {
  69.  
  70.             $("#dialog").dialog({autoOpen : false, modal : true, show : "scale", hide : "scale"});
  71.  
  72.             $("#contactUs").click(function() {
  73.                 $("#dialog").dialog("open");
  74.                 return false;
  75.             });
  76.            
  77.         });    
  78.     </script>
  79. <!--[if lt IE 9]>
  80.     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  81. <![endif]-->   
  82. </head>
  83. <body>
  84.     <div class="container">
  85.         <div class="row">
  86.             <h2>This is a Title</h2>
  87.         </div>
  88.        
  89.         <div class="row">
  90.             <table>
  91.                 <thead>
  92.                     <tr>
  93.                         <th>First Name</th>
  94.                         <th>Last Name</th>
  95.                         <th>Hero Title</th>
  96.                     </tr>
  97.                 </thead>
  98.                 <tbody>
  99.                     <tr>
  100.                         <td data-label="First Name">Bruce</td>
  101.                         <td data-label="Last Name">Wayne</td>
  102.                         <td data-label="Hero Title">Batman</td>
  103.                     </tr>
  104.                     <tr>
  105.                         <td data-label="First Name">Peter</td>
  106.                         <td data-label="Last Name">Parker</td>
  107.                         <td data-label="Hero Title">Spiderman</td>
  108.                     </tr>
  109.                     <tr>
  110.                         <td data-label="First Name">Bruce</td>
  111.                         <td data-label="Last Name">Banner</td>
  112.                         <td data-label="Hero Title">The Hulk</td>
  113.                     </tr>
  114.                     <tr>
  115.                         <td data-label="First Name">Clark</td>
  116.                         <td data-label="Last Name">Kent</td>
  117.                         <td data-label="Hero Title">Superman</td>
  118.                     </tr>
  119.                 </tbody>
  120.             </table>
  121.         </div> 
  122.            
  123.         <div class="row">
  124.             <br />
  125.             <a href="javascript:void(0);" class="btn btn-default"><i class="fa fa-save">&nbsp;</i>Save</a>
  126.             <a href="javascript:void(0);" id="contactUs" class="btn btn-default">Contact Us</a>                  
  127.         </div>
  128.        
  129.         <div id="dialog" title="Contact form">
  130.             <p>appear now</p>
  131.         </div>
  132.                
  133.     </div>
  134. </body>
  135. <html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!