web-dev-qa-db-fra.com

Casser une ligne de tableau en plusieurs lignes (mise en page sensible)

J'ai une page Web qui répertorie les éléments. Le modèle par défaut utilise une table pour cela, ce que je trouve très approprié. Cependant, dans ce tableau, une colonne contient beaucoup plus de texte que les autres:

enter image description here

Bien que cela fonctionne sur un grand écran, il est très ennuyant de lire sur un petit écran:

enter image description here

Afin de mieux utiliser l'espace disponible, je ne peux que penser à une fausse mise en page avec des divs. J'ai fait un prototype en utilisant bootstrap layout de grille, qui ressemble à une rangée de tableau sur de grands écrans, mais qui a une disposition différente sur les petits et très petits écrans:

enter image description here

Bien que cela améliore la lisibilité du texte en utilisant toute la largeur, je ne peux plus utiliser les utilitaires dont je dispose pour les tableaux et cela casse l'expérience utilisateur de manière subtile. Par exemple, j'utilise un script Nice qui permet de trier sur le client. Mais cela ne fonctionne que sur de vraies tables. (En outre, il existe de petites incohérences et des différences visuelles entre les tables réelles et les tables factices)

Est-il possible de reformater une ligne de la table en un conteneur multiligne similaire à celui de la dernière image?

FYI: J'utilise jQuery 2.1.1, Bootstrap 3.2.0.1 en tant que GUI Framework et asp.net MVC sur le serveur.

Bootply est ici: http://www.bootply.com/pRehwTai4G

Edit: au cas où cela ne serait pas assez clair: je veux garder le <tr> et <td> balises mais leur style similaire aux divs. Je ne veux pas remplacer la table par des divs.

htmltwitter-bootstrapresponsive-designtwitter-bootstrap-3
33
DasKrümelmonster

Vous pouvez jeter un oeil à Tables de données réactives . Si cela ne vous convient pas, vous pouvez utiliser JavaScript pour recréer vos vues sous forme de div. Ce serait le plus simple si vous pouviez obtenir des données de tableau au format JSON, qui seraient transformées en tableaux ou en div - en fonction de la résolution. Si vous ne pouvez pas l'avoir au format JSON, vous pouvez toujours utiliser les fonctions html () ou text () de jQuery pour extraire les données des cellules du tableau et les redessiner en div.

11
Maciej Gurban

Vous pouvez le faire uniquement avec quelques lignes de css ...

    @media all and (max-width:768px) {
        .calculator tr {    display: table;  width:100%;    }               
        .calculator td {    display: table-row; }           
    }

.calculator est la classe utilisée pour la table:

<table class="calculator">

J'utilise ceci pour modifier rapidement le tableau que j'utilise pour les entrées de la calculatrice pour une conception plus intelligente lors de l'affichage entre mobile/ordinateur de bureau: exemple en direct ici bien que la différence soit mieux visualisée par un appareil mobile et un ordinateur de bureau autre (tous mes scripts mobiles ne sont pas fournis au navigateur de bureau; la conception générale peut donc sembler étrange si vous visualisez uniquement via un navigateur de bureau et que vous réduisez au minimum, mais les cellules deviennent des lignes, etc., à illustrer).

De plus, vous pouvez ajouter un span/label, etc. dans la cellule et le rendre

display:table-cell;

et faites de la table un bloc si vous préférez, cette approche est beaucoup plus légère et évite d'avoir à utiliser javascript.

27
Pete - iCalculator

Si vous supprimez la balise thead de votre table et que vous liez th à l'intérieur de tbody, vous pouvez utiliser le code jss suivant avec le code CSS pour obtenir les tables réactives:

[~ # ~] html [~ # ~] 

<table class="table table-striped">
    <tbody>
        <tr>
            <th class="col-sm-1">Col 1
            </th>
            <th class="col-sm-2">Col 2
            </th>
            <th class="col-sm-6">Col 3
            </th>
            <th class="col-sm-1">Col 4
            </th>
            <th class="col-sm-1">Col 5
            </th>
            <th class="col-sm-1">Col 6
            </th>
        </tr>
        <tr>
            <td>ILK-AK Garching
            </td>
            <td>Einen guten Titel zu finden ist eigentlich eine Diskussion …
            </td>
            <td>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und…
            </td>
            <td>Niedrig
            </td>
            <td>
                <time datetime="2014-07-18T12:03:38.9570000">18.07.2014 12:03</time>
            </td>
            <td>
                <time datetime="2014-08-20T14:15:39.3830000">20.08.2014 14:15</time>
            </td>
        </tr>
        <tr>
            <td>ILK-AK Garching
            </td>
            <td>Zeta-Kafka ist, gleich einem Manifest, pompös und glorreich
            </td>
            <td>Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es wa…
            </td>
            <td>Niedrig
            </td>
            <td>
                <time rel="timeago" datetime="2014-08-20T13:41:22.3500000">20.08.2014 13:41</time>
            </td>
            <td>
                <time rel="timeago" datetime="2014-08-20T14:16:39.8170000">20.08.2014 14:16</time>
            </td>
        </tr>
        <tr>
            <td>ILK-AK Garching
            </td>
            <td>Tests von mechanischen Apparaten sind grundsätzlich erwünsc…
            </td>
            <td>Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mi…
            </td>
            <td>Mittel
            </td>
            <td>
                <time datetime="2014-08-20T13:41:51.0870000">20.08.2014 13:41</time>
            </td>
            <td>
                <time datetime="2014-08-20T14:18:21.2200000">20.08.2014 14:18</time>
            </td>
        </tr>
    </tbody>
</table>

[~ # ~] css [~ # ~] 

/* seo friendly tables */
 .div-table {
    display: table;
    /* Defines a Table */
    font-size: 14px;
    border-bottom: 1px solid #dddddd;
    color: #8d8d8d;
    margin: 0;
    width: 100%;
}
.table-container {
    display: table;
    width: 100%;
}
.table-head {
    display: table-header-group;
    /* Defines a table header group */
    font-weight: 600 !important;
    text-align: center;
    border: solid 1px #ddd;
    color: #333;
    background: rgb(242, 242, 242);
    font-size: inherit;
    vertical-align: middle;
}
.table-head .column {
    /* Column inside the table-head */
    background: #f2f2f2;
    color: #7d7d7d;
    border: solid 1px #ddd;
}
.table-row {
    display: table-row;
    /* Defines a table row */
    padding: 3px 6px;
    color: #333;
    border-collapse: collapse;
    text-align: center;
    vertical-align: middle;
}
.table-row .column:nth-child(1) {
    /* First column in a row */
    border-left: 1px solid #eeeeee;
}
.table-row:last-child .column {
    /* column in a last row */
    border-bottom: none;
}
.table-row:hover {
    background: #f9f9f9;
}
.column {
    display: table-cell;
    /* Defines a table cell */
    padding: 8px 3px;
    color: #333;
    border-bottom: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
    vertical-align:middle;
}
/* Responsive table */
 @media all and (max-width:768px) {
    .div-table, .table-row, .column, .column:before {
        display: block;
        /* Converts a table, table row, table column and table column:before into a block element */
    }
    .div-table, .table-row .column:last-child {
        border-bottom: none;
    }
    .table-head {
        position: absolute;
        /* Hides table head but not using display none */
        top: -1000em;
        left: -1000em;
    }
    .table-row {
        border: 1px solid #eeeeee;
        margin: 20px 0;
    }
    .table-row .column {
        border-right:none;
        text-align: left;
    }
    .table-row .column:nth-child(1) {
        /* first column of the row */
        border-left: none;
        border-right: none;
    }
    .table-row .column:last-child {
        /* last column of the row */
        border-right: none;
    }
    .table-row:last-child .column, .column {
        /* Column in the last row and column */
        border-bottom: 1px solid #eeeeee;
    }
    .table-row:hover {
        background: #fff;
    }
    .column:before {
        /* prints the value of data-label attribute before the column data */
        font-weight: bold;
        padding-right: 20px;
        font-size: 12px;
        content:"" attr(data-label)"";
        /* call the attribute value of data-label and adds a string // */
    }
    .column:hover {
        background: #f9f9f9;
    }
}

Code jQuery 

$(document).ready(function () {
    var gridClass = $('.table');
    // counts total number of td in a head so that we can can use it for label extraction
    var head_col_count = $(gridClass).find('tbody th').size();

    // loop which replaces td
    for (i = 0; i <= head_col_count; i++) {
        // head column label extraction
        var head_col_label = $(gridClass).find('tbody th:nth-child(' + i + ')').text();
        // replaces td with <div class="column" data-label="label">
        $(gridClass).find('tr td:nth-child(' + i + ')').replaceWith(function () {
            return $('<div class="column" data-label="' + head_col_label + '">').append($(this).contents());
        });
    }
    // replaces table with <div class="table">
    $(gridClass).replaceWith(function () {
        return $('<div class="div-table">').append($(this).contents());
    });

    // replaces thead with <div class="table-head">
    $('.div-table tbody tr:first-child').replaceWith(function () {
        return $('<div class="table-head">').append($(this).contents());
    });
    // replaces tbody with <div class="table-container">
    $('.div-table tbody').replaceWith(function () {
        return $('<div class="table-container">').append($(this).contents());
    });
    // replaces tr with <div class="table-row">
    $('.div-table tr').replaceWith(function () {
        return $('<div class="table-row">').append($(this).contents());
    });
    // replaces th with <div class="column">
    $('.div-table th').replaceWith(function () {
        return $('<div class="column">').append($(this).contents());
    });
});

Une démo en plein écran peut être trouvée ici . Jsfiddle.net modifier lien .

Cependant, si vous souhaitez utiliser le balisage HTML actuel, vous devez modifier un peu le script.

13
Ravimallya