table and inputs on popover test

Bootstrap snippet. table and inputs on popover test, this snippet was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code.
tags: popover,table

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<div class="container">

    <div class="col-md-3">
        <input name="data[Detail][3][extras_y_recargos]" value="0" class="form-control" type="text" 
        data-container="body" data-toggle="popover" data-placement="bottom"
        data-content="<table class='table table-recargos table-bordered'>
            <tr>
                <td colspan='2'>1,25</td>
                <td colspan='2'>1,75</td> 
                <td colspan='2'>0,35</td> 
                <td colspan='2'>1,75</td> 
                <td colspan='2'>2,1</td> 
                <td colspan='2'>2,0</td> 
                <td colspan='2'>2,5</td> 
                <td colspan='2'>&nbsp;</td> 
            </tr>
            <tr>
                <td colspan='2'>H EXTRA DIURNA</td>
                <td colspan='2'>H EXTRA NOCTURNA</td> 
                <td colspan='2'>RECARGO NOCTURNO</td> 
                <td colspan='2'>HORA FESTIVA DIURNA</td> 
                <td colspan='2'>HORA FESTIVA NOCTURNA</td> 
                <td colspan='2'>HORA EXTRA FESTIVA DIURNA</td> 
                <td colspan='2'>HORA EXTRA FESTIVA NOCTURNA</td> 
                <td colspan='2'>total</td> 
            </tr>
            <tr>
                <td>CANT.</td>
                <td>VALOR</td>
                <td>CANT.</td>
                <td>VALOR</td>
                <td>CANT.</td>
                <td>VALOR</td>
                <td>CANT.</td>
                <td>VALOR</td>
                <td>CANT.</td>
                <td>VALOR</td>
                <td>CANT.</td>
                <td>VALOR</td>
                <td>CANT.</td>
                <td>VALOR</td>
                <td colspan='2'>&nbsp;</td> 
            </tr>
            <tr>
                <td><input type='text' class='form-control' /></td>
                <td><input type='text' class='form-control' /></td>
                <td><input type='text' class='form-control' /></td>
                <td><input type='text' class='form-control' /></td>
                <td><input type='text' class='form-control' /></td>
                <td><input type='text' class='form-control' /></td>
                <td><input type='text' class='form-control' /></td>
                <td><input type='text' class='form-control' /></td>
                <td><input type='text' class='form-control' /></td>
                <td><input type='text' class='form-control' /></td>
                <td><input type='text' class='form-control' /></td>
                <td><input type='text' class='form-control' /></td>
                <td><input type='text' class='form-control' /></td>
                <td><input type='text' class='form-control' /></td>
                <td colspan='2'>&nbsp;</td> 
            </tr>
            <tr>
                <td colspan='5'><button class='btn btn-info'>Cerrar</button></td>
                <td colspan='5'><button class='btn btn-info'>Guar</button></td>
                <td colspan='5'><button class='btn btn-info'>Aplicar a todos</button></td>
            </tr>
        </table>">
    </div>
</div>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

body{margin-top:20px;}
.popover {
  max-width: 800px;
}

.table-recargos tr td{
    font-size:10px;    
}

table .border-td td{
    border:1px solid
}
                                    

Javascript/Jquery code

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview selection

$(function () {
  $('[data-toggle="popover"]').popover({html:true})
}) 

Similar snippets

Bootstrap snippet bs4 promo pricing table

bs4 promo pricing table

View

Bootstrap snippet Messages Board

Messages Board

View

Bootstrap snippet bs4 beta pricing

bs4 beta pricing

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Feb 27th 2016, 19:33

Views: 277