将表格行分成多行（响应式布局）

问题描述 投票：0回答：5

我有一个列出项目的网页。默认模板使用一个表格，我认为这非常合适。然而，在此表中，有一列包含的文本比其他列多得多：

enter image description here

虽然这在大屏幕上可行，但在小屏幕上阅读却很烦人：

enter image description here

为了更好地利用可用空间，我只能想到使用div的假表布局。我做了一个原型，使用引导网格布局，看起来像大屏幕上的表格行，但在小屏幕和超小屏幕上有不同的布局：

enter image description here

虽然通过使用全宽提高了文本的可读性，但我无法再使用表格的实用程序，并且它以微妙的方式破坏了用户体验。例如，我使用一个很好的脚本来在客户端进行排序。但这仅适用于真实的桌子。 （另外，真表和假表之间存在细微的不一致和视觉差异）

有什么方法可以将表行重新格式化为类似于上一张图片中的多行容器吗？

仅供参考：我在服务器上使用 jquery 2.1.1、Bootstrap 3.2.0.1 作为 GUI 框架和 asp.net MVC。

Bootply 在这里：http://www.bootply.com/pRehwTai4G

编辑：以防不够清晰：我想保留 

<tr>
和 
<td>
标签，但样式与 div 类似。我不想用 div 替换表格。

html twitter-bootstrap responsive-design twitter-bootstrap-3
5个回答
52
投票

您可以纯粹使用几行 css 来完成此操作...

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

.calculator 是用于表的类：

<table class="calculator">

我用它来快速更改用于计算器输入的表格，以便在移动/桌面之间查看时实现更智能的外观设计：此处为实时示例，尽管最好通过移动设备和桌面并排查看差异（并非所有我的移动脚本被传递到桌面浏览器，因此如果您纯粹通过桌面浏览器查看并最小化，则整体设计可能看起来很奇怪，但单元格将变成行等来说明）。

此外，您可以在单元格内添加跨度/标签等，并使之

display:table-cell;

如果您愿意，可以将表格设为块，这种方法更加轻量级，并且不再需要使用 JavaScript。

13
投票

您可以查看响应式数据表。如果这不能满足您的需求，您可以使用 JavaScript 将表格视图重新创建为 div。如果您可以获得 JSON 格式的表数据，这将是最简单的，它会根据分辨率转换为表或 div。如果您不能将其作为 JSON，您始终可以使用 jQuery 的 html() 或 text() 从表格单元格中获取数据并重新绘制到 div 中。

13
投票

如果您从表格中删除 

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 代码

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

可以在此处找到全屏演示。 Jsfiddle.net 编辑链接。

但是，如果您想使用当前的 html 标记，那么您必须稍微更改脚本。

0
投票

谢谢皮特，我使用了你的解决方案并做了一些小小的修改。 （使用类“br”来打破一行并继续 TD。）

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.calculator br {display:none;width:0;} 
.calculator tr td.br {display:none} 

@media all and (max-width:768px) {
.calculator tr {display: table;width:100%;} 
.calculator td {width:50%;}           
.calculator th {width:50%;}
.calculator tr td.br {display:table-row;} 
.calculator tr th.br {display:table-row;}             
}
</style>


<table class="calculator" style="width:100%">
  <tr>
<th>Firstname a</th><th>Lastname</th>
<th class="br">Age</th>
  </tr>
  <tr>
    <td>Jilldfs fds</td><td>Smith</td><td class="br"></td><td>50</td><td>50</td>
  </tr>
  <tr>
    <td>Eve</td><td>Jackson</td><td class="br"></td><td>94</td><td>94</td>
  </tr>
</table>
0
投票

现在是 2024 年，我们现在拥有更好的工具来实现响应式表格布局。特别是，我们可以使用 CSS 媒体查询来覆盖表格以使用网格布局，然后我们可以覆盖特定列中的单元格，以便它们跨越表格的整个宽度，这迫使它们流到自己的行上。请参阅下面的 OP 示例的改编版，该示例在宽度适度受限的浏览器视口中响应性地回流“Beschreibung”列，并在宽度极度受限的浏览器视口中另外回流“Titel”列。

body {
    background-color: #fff;
    color: #333;
    font-family: Arial, sans-serif;
}
table.responsive {
    border-collapse: collapse;
}
table.responsive > :is(thead, tbody, tfoot) > tr > :is(td, th) {
    padding: 0.667em;
    text-align: initial;
    vertical-align: top;
}
table.responsive > thead > tr > :is(td, th) {
    border-bottom: 3px solid #666;
}
table.responsive > thead > tr > th.sort-asc {
    border-color: #af0331;
}
table.responsive > thead > tr > th.sort-asc::after {
    border-color: #333;
    border-width: 3px;
    border-style: none solid solid none;
    content: "";
    display: inline-block;
    height: 0.25em;
    margin-left: 0.5em;
    margin-top: -0.25em;
    transform: rotate(45deg);
    vertical-align: middle;
    width: 0.25em;
}
table.responsive > tbody > tr > :is(td, th) {
    border-bottom: 1px solid #777;
}
table.responsive > tbody > tr.lavender > :is(td, th) {
    background-color: #b7bcd6;
}
table.responsive > tbody > tr.gray > :is(td, th) {
    background-color: #ddd;
}
@media screen and (max-width: 25cm) {
    table.responsive {
        display: grid;
        grid-auto-flow: dense;
        grid-template-columns: repeat(5, auto);
    }
    table.responsive > :is(thead, tbody, tfoot),
    table.responsive > :is(thead, tbody, tfoot) > tr {
        display: contents;
    }
    table.responsive > thead > tr > :is(td, th):nth-child(3) {
        display: none;
    }
    table.responsive > tbody > tr > :is(td, th):nth-child(3) {
        grid-column: 1 / -1;
    }
    table.responsive > tbody > tr > :is(td, th):nth-child(3)::before {
        content: "Beschreibung: ";
        font-weight: bold;
    }
    table.responsive > tbody > tr > :is(td, th):not(:nth-child(3)) {
        border-bottom: none;
        padding-bottom: 0;
    }
}
@media screen and (max-width: 20cm) {
    table.responsive {
        grid-template-columns: repeat(4, auto);
    }
    table.responsive > thead > tr > :is(td, th):nth-child(2) {
        display: none;
    }
    table.responsive > tbody > tr > :is(td, th):nth-child(2) {
        grid-column: 1 / -1;
    }
    table.responsive > tbody > tr > :is(td, th):nth-child(2)::before {
        content: "Titel: ";
        font-weight: bold;
    }
}
<table class="responsive">
    <thead>
        <tr>
            <th>Sitzungstyp</th>
            <th>Titel</th>
            <th class="sort-asc">Beschreibung</th>
            <th>Priorität</th>
            <th>Erstellt</th>
            <th>Geändert</th>
        </tr>
    </thead>
    <tbody>
        <tr class="lavender">
            <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>18.07.2014 12:03</td>
            <td>vor 14 Minuten</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ünde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mi…</td>
            <td>Mittel</td>
            <td>von einer Stunde</td>
            <td>vor 11 Minuten</td>
        </tr>
        <tr class="gray">
            <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>vor einer Stunde</td>
            <td>vor 13 Minuten</td>
        </tr>
        <tr>
            <td>ILK-AK Augsburg</td>
            <td>Alles in Ordnung</td>
            <td>Keine Panik</td>
            <td>Niedrig</td>
            <td>vor einer Stunde</td>
            <td>vor 33 Sekunden</td>
        </tr>
    </tbody>
</table>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.