Buenas tardes tengo problemas con la manera en que se ve mi contenido de la tabla html. El código
/*
Please consider that the JS part isn't production ready at all, I just code it to show the concept of merging filters and titles together !
*/
$(document).ready(function () {
$('.filterable .btn-filter').click(function () {
var $panel = $(this).parents('.filterable'),
$filters = $panel.find('.filters input'),
$tbody = $panel.find('.table tbody');
if ($filters.prop('disabled') == true) {
$filters.prop('disabled', false);
$filters.first().focus();
} else {
$filters.val('').prop('disabled', true);
$tbody.find('.no-result').remove();
$tbody.find('tr').show();
}
});
$('.filterable .filters input').keyup(function (e) {
/* Ignore tab key */
var code = e.keyCode || e.which;
if (code == '9')
return;
/* Useful DOM data and selectors */
var $input = $(this),
inputContent = $input.val().toLowerCase(),
$panel = $input.parents('.filterable'),
column = $panel.find('.filters th').index($input.parents('th')),
$table = $panel.find('.table'),
$rows = $table.find('tbody tr');
/* Dirtiest filter function ever ;) */
var $filteredRows = $rows.filter(function () {
var value = $(this).find('td').eq(column).text().toLowerCase();
return value.indexOf(inputContent) === -1;
});
/* Clean previous no-result if exist */
$table.find('tbody .no-result').remove();
/* Show all rows, hide filtered ones (never do that outside of a demo ! xD) */
$rows.show();
$filteredRows.hide();
/* Prepend no-result row if all rows are filtered */
if ($filteredRows.length === $rows.length) {
$table.find('tbody').prepend($('<tr class="no-result text-center"><td colspan="' + $table.find('.filters th').length + '">No result found</td></tr>'));
}
});
});
.fixed_header{
width: 100%;
table-layout: fixed;
}
.fixed_header tbody{
display:block;
width: 100%;
overflow: auto;
height: 200px;
}
.fixed_header thead tr {
display: block;
}
.fixed_header th, .fixed_header td {
width: 200px;
}
.filterable {
margin-top: 15px;
}
.filterable .panel-heading .pull-right {
margin-top: -20px;
}
.filterable .filters input[disabled] {
background-color: transparent;
border: none;
cursor: auto;
box-shadow: none;
padding: 0;
height: auto;
}
.filterable .filters input[disabled]::-webkit-input-placeholder {
color: #333;
font-size: 100%;
}
.filterable .filters input[disabled]::-moz-placeholder {
color: #333;
}
.filterable .filters input[disabled]:-ms-input-placeholder {
color: #333;
}
<div class="panel filterable panel-primary">
<div class="panel-heading">
<button class="btn btn-primary btn-filter" style="margin-right:10px"><span class="glyphicon glyphicon-search"></span> Buscar</button>
</div>
<table class="table fixed_header" style="height: 50px;">
<thead>
<tr class="filters">
<th><input type="text" class="form-control text-center" style="padding-left: -50px" placeholder="Fecha Turno" disabled></th>
<th><input type="text" class="form-control text-center" placeholder="Hs Turno" disabled></th>
<th><input type="text" class="form-control text-center" placeholder="Prestador" disabled></th>
<th><input type="text" class="form-control text-center" placeholder="Afiliado" disabled></th>
<th><input type="text" class="form-control text-center" placeholder="Cancelado?" disabled></th>
<th><input type="text" class="form-control text-center" placeholder="#" disabled></th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td>12-03-2020</td>
<td>15:30</td>
<td>Carlos Sanchez</td>
<td>Franco Fernandez</td>
<td>NO</td>
<td><a>Cancelar</a></td>
</tr>
</tbody>
</table>
</div>
que tengo es el siguiente, yo quisiera que abarque todo el ancho del panel-primary.