jQuery Mobile 2-page Base Fiddle

by Andy Bulka

HTML

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<div data-role="page" id="p0"> 
    <div  data-role="header"><h1>Header Page 0</h1></div> 
    
    <div  data-role="content">

        <table class=m0 border="0">
            <tr class=m1>
                <td><span class=m2>Edit</span></td>
                <td><span class=m2>hig</span></td>
                <td><span class=m2>hi</span></td>
            </tr>
            <tr>
                <td><a href="#p2" data-role="button" class=m3>ENTER</a></td>
                <td><a href="#p2" data-role="button" class=m3>1</a></td>
                <td><a href="#p2" data-role="button" class=m3>2</a></td>
            </tr>
        </table>
        
        <a href="#p1" data-role="button">Go To Page 1</a>

        <table class=m0 border="0">
            <tr class=m1>
                <td><span class=m2 style="padding:0 33px 0 33px;">Edit</span></td>
                <td><span class=m2 style="padding:0 17px 0 17px;">hig</span></td>
                <td><span class=m2 style="padding:0 17px 0 17px;">hi</span></td>
                <td><span class=m2 style="padding:0 17px 0 17px;">clear</span></td>
            </tr>
            <tr>
                <td><a href="#p2" data-role="button" class=m3>ENTER</a></td>
                <td><a href="#p2" data-role="button" class=m3>A</a></td>
                <td><a href="#p2" data-role="button" class=m3>B</a></td>
                <td><a href="#p2" data-role="button" class=m3>xx</a></td>
            </tr>
        </table>

        <table class=m0 border="0">
            <tr class=m1>
                <td></td>
                <td><span class=m2 >exp</span></td>
                <td><span class=m2 >x2</span></td>
                <td><span class=m2 >log</span></td>
                <td><span class=m2 >dup</span></td>
            </tr>
            <tr>
                <td><a...

CSS

/* border-spacing is space between column cells */
.m0 {height: 100%; border-spacing:6px 0px;}

/* text-align on this tr element controls the things inside */
.m1 {text-align: center;}

/* label. need important and text shadown to override shadow text from jqm */
.m2 {background:#171717; color:#ffb93d; !important; text-shadow: none; padding:0 12px 0 12px;text-transform:uppercase;font-size:70%;}

/* get rid of the huge margin around jqm buttons  */
.m3 {margin: 0;}

/* target a jqm span inside button to make button shorter */
td a span.ui-btn-inner { padding: .2em 1.1em; }




.fred {margin:0 2px 7px 0;}
.mega-button { display:inline;}
.calc-label2 {
    background:red; color:white; padding:0 25px 0 25px;
}
.outer {
    background:red;
    padding 0 15px 0 15px;
    margin 0 15px 0 15px;
    width:50px;
}
.calc-label { 
    background:cyan;
    font-size:60%;
    text-align:center;
    }
/*
th, td { padding: 5px; }
// cellspacing
table { border-collapse:separate; border-spacing: 5px; } // cellspacing="5"
table { border-collapse:collapse; border-spacing: 0; }   // cellspacing="0"

// valign
th, td { vertical-align: top; }

// align (center)
table { margin: 0 auto; }
*/