Pasted

<!doctype html>
<!--[if IE 8 ]>    <html lang="en" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js lt-ie9> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
    <title>Base Site Page</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
 
    <link href="https://code.jquery.com/ui/1.11.4/themes/flick/jquery-ui.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/alertifyjs-alertify.js/1.0.10/css/alertify.css" rel="stylesheet">
    <style>
        /**********************************************************************
         * Standard HTML tags and classes
         **********************************************************************/
        body { padding: 0; margin: 20px 10px; font-family: "Roboto Condensed", sans-serif; font-size: 13px; }
        .float-right { float: right; }
        .float-left { float: left; }
 
        /**********************************************************************
         * Start responsive table handling
         **********************************************************************/
        table { border-collapse: collapse; width: 100%; }
        th { background-color: #eee; font-weight: bold; }
        th,td { border: 0.125em solid #333; line-height: 1.5; padding: 0.75em; text-align: left; }
 
        /* Stack rows vertically on small screens */
        @media (max-width: 30em) {
            /* Hide column labels */
            thead tr { position: absolute; top: -9999em; left: -9999em; }
            tr { border: 0.125em solid #333; border-bottom: 0; }
            
            /* Leave a space between table rows */
            tr + tr { margin-top: 1.5em; }
            
            /* Get table cells to act like rows */
            tr,td { display: block; }
            td { border: none; border-bottom: 0.125em solid #333; padding-left: 50%; }
            
            /* Add data labels */
            td:before { content: attr(data-label); display: inline-block; font-weight: bold; line-height: 1.5; margin-left: -100%; width: 100%; }
        }
 
        /* Stack labels vertically on smaller screens */
        @media (max-width: 20em) {
            td { padding-left: 0.75em; }
            td:before { display: block; margin-bottom: 0.75em; margin-left: 0; }
        }        
    </style>
 
    <link href="css/responsive_table.css" rel="stylesheet">
 
    <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/alertifyjs-alertify.js/1.0.10/js/alertify.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
    <script>
        $(document).ready(function() {
 
            $("#dialog").dialog({autoOpen : false, modal : true, show : "scale", hide : "scale"});
 
            $("#contactUs").click(function() {
                $("#dialog").dialog("open");
                return false;
            });
            
        });     
    </script>
<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->    
</head>
<body>
    <div class="container">
        <div class="row">
            <h2>This is a Title</h2>
        </div>
        
        <div class="row">
            <table>
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Hero Title</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td data-label="First Name">Bruce</td>
                        <td data-label="Last Name">Wayne</td>
                        <td data-label="Hero Title">Batman</td>
                    </tr>
                    <tr>
                        <td data-label="First Name">Peter</td>
                        <td data-label="Last Name">Parker</td>
                        <td data-label="Hero Title">Spiderman</td>
                    </tr>
                    <tr>
                        <td data-label="First Name">Bruce</td>
                        <td data-label="Last Name">Banner</td>
                        <td data-label="Hero Title">The Hulk</td>
                    </tr>
                    <tr>
                        <td data-label="First Name">Clark</td>
                        <td data-label="Last Name">Kent</td>
                        <td data-label="Hero Title">Superman</td>
                    </tr>
                </tbody>
            </table>
        </div>  
            
        <div class="row">
            <br />
            <a href="javascript:void(0);" class="btn btn-default"><i class="fa fa-save">&nbsp;</i>Save</a>
            <a href="javascript:void(0);" id="contactUs" class="btn btn-default">Contact Us</a>                   
        </div>
        
        <div id="dialog" title="Contact form">
            <p>appear now</p>
        </div>
                
    </div>
</body>
<html>