Saltar al contenido
Aprender Programación

AÑADIR FLECHAS EN REGISTROS DE TABLAS CON BOOTSTRAP

Bootstrap puede ayudarlo a personalizar la placa de circuito, pero su función no es satisfactoria. En otras palabras, puede utilizar el marco Bootstrap para crear tablas HTML de aspecto profesional.

es una función común en las aplicaciones web. Para agregar la función de clasificación de columnas, debe cambiar el estilo de la tabla HTML. Si usa la estructura de la tabla Bootstrap, puede agregar flechas para ordenar los registros que componen la tabla.

En el fragmento de código de muestra a continuación, agregaremos un ícono de flecha hacia arriba / hacia abajo a la columna de la tabla para ayudar a ordenar los registros en orden ascendente y / o descendente.

Código HTML:

<div class="container">
    <h2 class="page-header">Tabla Bootstrap con selectores de ordenacion</h2>

    <table class="table table-bordered table-sortable">
        <caption>
            <code>table.table-sortable</code>
        </caption>
        <thead>
            <tr>
                <th class="asc">#</th>
                <th class="desc">Campo 1</th>
                <th>Campo 2</th>
                <th>Campo 3</th>
            </tr>
        </thead>
        <tbody>
            <tr><th scope="row">1</th><td>Data 1</td><td>Pedro</td><td>2020-01-24</td></tr>
            <tr><th scope="row">2</th><td>Data 2</td><td>Angela</td><td>2020-01-22</td></tr>
            <tr><th scope="row">3</th><td>Data 3</td><td >Laura</td><td>2020-01-20</td></tr>
        </tbody>
    </table>
</div>

table.table-sortable
#Campo 1Campo 2Campo 3
1Data 1Pedro2020-01-24
2Data 2Angela2020-01-22
3Data 3Laura2020-01-20

Código CSS:

h2.page-header {
    margin-top: 0px;
    padding-top: 0px;
    line-height: 15px;
    vertical-align: middle;
}

.table-sortable > thead > tr > th {
    cursor: pointer;
    position: relative;
}

.table-sortable > thead > tr > th:after,
.table-sortable > thead > tr > th:after,
.table-sortable > thead > tr > th:after {
    content: ' ';
    position: absolute;
    height: 0;
    width: 0;
    right: 10px;
    top: 16px;
}

.table-sortable > thead > tr > th:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #ccc;
    border-bottom: 0px solid transparent;
}

.table-sortable > thead > tr > th:hover:after {
    border-top: 5px solid #888;
}

.table-sortable > thead > tr > th.asc:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 0px solid transparent;
    border-bottom: 5px solid #333;
}
.table-sortable > thead > tr > th.asc:hover:after {
    border-bottom: 5px solid #888;
}

.table-sortable > thead > tr > th.desc:after {    
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
    border-bottom: 5px solid transparent;
}

espero te haya gustado este articulo y no te olvides compartir con tus amigos programadores