Html 将表格行分成多行（响应式布局）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25405105/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Break a table row into multiple line (responsive layout)
提问by DasKrümelmonster
I have a webpage that lists items. The default template uses a table for that, which i find very appropriate. In this table however, there is one column that contains much more text than the others:
我有一个列出项目的网页。默认模板为此使用了一个表格，我认为它非常合适。但是，在此表中，有一列包含的文本比其他列多得多：
While that works out on a large screen, it is very annoying to read on a small screen:
虽然这在大屏幕上可行，但在小屏幕上阅读非常烦人：
In order to use the available space better, I can only think of a fake-table layout using divs. I did a prototype, using bootstrap grid layout, that looks like a table row on large screens, but has a different layout on small and extra small screens:
为了更好地利用可用空间，我只能想到一个使用divs的假表布局。我做了一个原型，使用引导网格布局，它在大屏幕上看起来像一个表格行，但在小屏幕和超小屏幕上有不同的布局：
While that improves the readability of the text by using the full width, I cannot use the utilities I've got for tables any more, and it breaks the user experience in subtle ways. For example, I use a nice script that enables sorting at the client. But that works only on real tables. (Also, there are small inconsistencies and visual differences between real tables and fake tables)
虽然这通过使用全宽提高了文本的可读性，但我不能再使用我为表格提供的实用程序，并且它以微妙的方式破坏了用户体验。例如，我使用了一个很好的脚本，可以在客户端进行排序。但这仅适用于真实表。（此外，真表和假表之间存在小的不一致和视觉差异）
Is there any way that I can reformat a table row into a multi-line container similar to the one in the last image?
有什么方法可以将表格行重新格式化为类似于上一个图像中的多行容器？
FYI: I am using jquery 2.1.1, Bootstrap 3.2.0.1 as GUI Framework and asp.net MVC on the server.
仅供参考：我在服务器上使用 jquery 2.1.1、Bootstrap 3.2.0.1 作为 GUI 框架和 asp.net MVC。
Bootply is here: http://www.bootply.com/pRehwTai4G
Bootply 在这里：http: //www.bootply.com/pRehwTai4G
Edit: in case that did not come out clear enough: I want to keep the <tr>and <td>tags but style them similar to the divs. I do not want to replace the table with divs.
编辑：以防万一不够清楚：我想保留<tr>和<td>标签，但将它们设置为类似于 div 的样式。我不想用 div 替换表格。
采纳答案by Maciej Gurban
You could take a look at Responsive data tables. If that does not suit your needs, you could use JavaScript to re-create your table views as divs. This would be the easiest if you can get table data as JSON, which would be transformed into either tables or divs - depending on resolution. If you can't have it as JSON, you can always use jQuery's html() or text() to get the data from table cells and re-draw into divs.
你可以看看Responsive data tables。如果这不符合您的需求，您可以使用 JavaScript 将您的表格视图重新创建为 div。如果您可以将表格数据作为 JSON 获取，这将是最简单的，这将被转换为表格或 div - 取决于分辨率。如果你不能把它作为 JSON，你总是可以使用 jQuery 的 html() 或 text() 从表格单元格中获取数据并重新绘制到 div 中。
回答by Pete - iCalculator
You can do this purely with a couple of lines of css...
你可以纯粹用几行css来做到这一点......
@media all and (max-width:768px) {
.calculator tr { display: table; width:100%; }
.calculator td { display: table-row; }
}
.calculator is the class used for the table:
.calculator 是用于表的类：
<table class="calculator">
I use this to quickly alter the table that I use for calculator inputs for smarter looking design when viewing between mobile/desktop: live example herethough the difference is best viewed by a mobile device and desktop along side each other (not all my mobile scripts are delived to the desktop browser so the overall design may look odd if you purely view through a desktop browser and minimise but the cells will become rows etc. to illustrate).
在移动设备/桌面设备之间查看时，我使用它来快速更改用于计算器输入的表格，以获得更智能的外观设计：此处的实时示例，尽管最好通过移动设备和桌面并排查看差异（并非我所有的移动脚本）交付给桌面浏览器，因此如果您纯粹通过桌面浏览器查看并最小化，则整体设计可能看起来很奇怪，但单元格将变成行等以进行说明）。
In addition you could add a span / label etc within the cell and makes this
此外，您可以在单元格中添加跨度/标签等，并使其成为
display:table-cell;
and make the table a block if you prefer, this approach is much more lightweight and stops the necessity to use javascript.
如果您愿意，可以将表格设为块，这种方法更轻量级，并且无需使用 javascript。
回答by Ravimallya
If you remove theadtag from your table and bind thinside tbody, then you can use the following jquery with css code to get responsive tables:
如果您thead从表中删除标记并绑定th到内部tbody，那么您可以使用以下 jquery 和 css 代码来获取响应表：
HTML
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
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
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());
});
});
A fullscreen demo can be found here. Jsfiddle.net edit link.
可以在此处找到全屏演示。Jsfiddle.net 编辑链接。
However, if you wish to go with the current html markup, then, you have to change the script a bit.
但是，如果您希望使用当前的 html 标记，则必须稍微更改脚本。
