Skip to main content
se eliminaron 119 caracteres en el cuerpo
Enlace
se eliminaron 119 caracteres en el cuerpo
Origen Enlace
 /*
                         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>
    <% @my_turns.each do |turns| %>
      <tr class="text-center">
        
        <td><%= turns.date_turn.strftime("%d<td>12-%m03-%Y") %><2020</td>
        <td><%= turns.hs_turn.strftime("%H<td>15:%M") %> Hs<30</td>
        <td><%= turns.provider.fullname<td>Carlos %><Sanchez</td>
        <td><%= turns.affiliate.fullname<td>Franco %><Fernandez</td>
        <td><%= turns.canceled %><<td>NO</td>
        
        <td><%= link_to t('Cancelar'), [:admin, turns],
                                                      method: :delete,
                                                      data: { confirm: "Are you sure?"} %><<td><a>Cancelar</a></td>
        
        
      </tr>
    <% end %>
  </tbody>
</table>
</div>
 /*
                         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>
    <% @my_turns.each do |turns| %>
      <tr class="text-center">
        
        <td><%= turns.date_turn.strftime("%d-%m-%Y") %></td>
        <td><%= turns.hs_turn.strftime("%H:%M") %> Hs</td>
        <td><%= turns.provider.fullname %></td>
        <td><%= turns.affiliate.fullname %></td>
        <td><%= turns.canceled %></td>
        
        <td><%= link_to t('Cancelar'), [:admin, turns],
                                                      method: :delete,
                                                      data: { confirm: "Are you sure?"} %></td>
        
        
      </tr>
    <% end %>
  </tbody>
</table>
</div>
 /*
                         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>
Origen Enlace

Problema con table html

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>
    <% @my_turns.each do |turns| %>
      <tr class="text-center">
        
        <td><%= turns.date_turn.strftime("%d-%m-%Y") %></td>
        <td><%= turns.hs_turn.strftime("%H:%M") %> Hs</td>
        <td><%= turns.provider.fullname %></td>
        <td><%= turns.affiliate.fullname %></td>
        <td><%= turns.canceled %></td>
        
        <td><%= link_to t('Cancelar'), [:admin, turns],
                                                      method: :delete,
                                                      data: { confirm: "Are you sure?"} %></td>
        
        
      </tr>
    <% end %>
  </tbody>
</table>
</div>

que tengo es el siguiente, yo quisiera que abarque todo el ancho del panel-primary.