"Fixed Total Table on Screen"
Bootstrap 3.0.0 Snippet by epicadoc

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <p>This is an example of a table that<br> must be always shown at screen for<br> total purposes<br> The idea is to make a button that hide-show the table. <br> </p> <table class="table table-bordered" id="totales"> <tbody> <tr> <th scope="row"> + </th> <td>100,000.00</td> </tr> <tr> <th scope="row"> - </th> <td>85,000.00</td> </tr> <tr> <th scope="row">DIF</th> <td>-15,000.00</td> </tr> </tbody> </table> <a href="#" class="btn btn-sm" id="shvnt" onclick="shtab()">VNT</a> </div> </div>
#totales { position: fixed; width: 15%; right: 20px; bottom: 5px; } #totales th { text-align: center; } #totales td { text-align: right; } #shvnt { position: fixed; right: 20px; bottom: 20px; background: #00b489; color: white; }
function shtab( var tb = document.getElementById("totales"); if (tb).style.display == "none") { tb.style.display = ""; } else { tb.style.display = "none"; } )

Related: See More


Questions / Comments: