table and inputs on popover test

This bootstrap snippet called "table and inputs on popover test" 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

This is the HTML code for this bootstrap snippet

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

<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>

This is the CSS code for this bootstrap snippet

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

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

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

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

This is the JS code for this bootstrap snippet

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

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

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Feb 27th 2016, 19:33

Views: 261