web-dev-qa-db-ja.com

テーブル行を複数行に分割する（レスポンシブレイアウト）

アイテムをリストするウェブページがあります。デフォルトのテンプレートはそのためのテーブルを使用しますが、これは非常に適切です。ただし、この表には、他の列よりもはるかに多くのテキストを含む列が1つあります。

enter image description here

これは大きな画面ではうまくいきますが、小さな画面で読むのは非常に面倒です。

enter image description here

使用可能なスペースをより有効に使用するために、divを使用した偽のテーブルレイアウトしか考えられません。 bootstrapグリッドレイアウトを使用してプロトタイプを作成しました。これは、大きな画面ではテーブル行のように見えますが、小さな画面と非常に小さな画面ではレイアウトが異なります。

enter image description here

全幅を使用することでテキストの読みやすさが向上しますが、テーブル用に用意したユーティリティは使用できなくなり、ユーザーエクスペリエンスが微妙に損なわれます。たとえば、クライアントでの並べ替えを可能にするNiceスクリプトを使用します。しかし、それは実際のテーブルでのみ機能します。 （また、実際のテーブルと偽のテーブルの間には小さな矛盾と視覚的な違いがあります）

テーブルの行を最後の画像のような複数行のコンテナに再フォーマットする方法はありますか？

参考までに、jquery 2.1.1、Bootstrap 3.2.0.1をGUIフレームワークとして使用し、サーバー上のasp.net MVCを使用しています。

Bootplyはこちら： http://www.bootply.com/pRehwTai4G

編集：それが十分に明確になっていない場合：<tr>および<td>タグを保持したいが、divと同様にスタイルしたい。テーブルをdivに置き換えたくありません。

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

レスポンシブデータテーブル をご覧ください。それがニーズに合わない場合は、JavaScriptを使用して、Table Viewをdivとして再作成できます。これは、テーブルデータをJSONとして取得でき、解像度に応じてテーブルまたはdivに変換できる場合に最も簡単です。 JSONとして取得できない場合は、常にjQueryのhtml（）またはtext（）を使用して、テーブルセルからデータを取得し、divに再描画できます。

11
Maciej Gurban

あなたはCSSの数行でこれを純粋に行うことができます...

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

.calculatorは、テーブルに使用されるクラスです。

<table class="calculator">

これを使用して、モバイル/デスクトップ間で表示するときにスマートなデザインの計算機入力に使用するテーブルをすばやく変更します： live example here ただし、モバイルデバイスとデスクトップはそれぞれの横に表示されますその他（モバイルスクリプトがすべてデスクトップブラウザーに配信されるわけではないため、デスクトップブラウザーから純粋に表示して最小化しても、セルが説明のために行などになる場合、全体的なデザインが奇妙に見えることがあります）。

さらに、セル内にスパン/ラベルなどを追加して、これを作成できます

display:table-cell;

必要に応じてテーブルをブロックにすると、このアプローチははるかに軽量になり、javascriptを使用する必要がなくなります。

27
Pete - iCalculator

テーブルからtheadタグを削除し、th内でtbodyをバインドすると、cssコードで次のjqueryを使用してレスポンシブテーブルを取得できます。

[〜＃〜] 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;
    }
}

jQuery Code

$(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());
    });
});

フルスクリーンデモは here にあります。 Jsfiddle.net編集 リンク 。

ただし、現在のHTMLマークアップを使用する場合は、スクリプトを少し変更する必要があります。

13
Ravimallya