使表格内容响应屏幕大小
Posted
技术标签:
【中文标题】使表格内容响应屏幕大小【英文标题】：Making table content responsive to screen size 【发布时间】：2016-01-01 12:09:26 【问题描述】：我正在制作一个包含图片和文本内容（四行五列）的表格，并且正在寻找使内容适应屏幕而无需从左向右滚动来阅读它的最佳方法。所以在笔记本电脑上它会显示为五列，但在移动屏幕上可能会显示一两列。
我看到了制作一堆容器、div 等并手动使它们像表格一样在页面上对齐的建议。我不确定如何执行此操作以达到与当前表相同的效果。如果有任何帮助和建议，我将不胜感激！
【问题讨论】：
Bootstrap 是响应能力最好的 【参考方案1】：jsBin demo - Responsive Table（无引导）
而不是告诉你“......只需使用 Bootstrap”（155KB 的东西你几乎不会使用和理解，并且会浪费宝贵的时间搜索 方法的）...
这是一所小学校如何响应式思考和真正了解你在做什么。
以移动优先的方式思考：
添加到页面标题：
<meta name="viewport" content="width=device-width, initial-scale=1">
在您的 CSS 中，编写适合超小型设备的代码<768px(or higher) 默认。
因此，无论您写成 Default，它将适用于所有其他（更大）尺寸classname 指向同一元素：
/* ::: XS (Extra small devices ad up) so: DEFAULT STYLES! */
/*here*/
/* ::: SM (Tablets and up) */
@media (min-width: 768px) /*here*/
/* ::: MD (Desktop and up) */
@media (min-width: 992px) /*here*/
/* ::: LG (Large desktop and up) */
@media (min-width: 1200px) /*here*/
@media 覆盖逻辑在调整大小时如何工作？这个简单的例子会告诉你一切：
XS +------------------->
SM +--------------->
MD +---------->
LG +----->
<div class=".hide-xs">You'll never see me :(</div><!-- Will be hidden on all sizes! -->
<div class=".hide-xs .show-md">:)</div><!-- hidden on mobile(xs) and tablet(sm) but visible on Desktop(md) and Large desktop(lg) -->
在 CSS 中，您只需要在 XS（不在 SM 内部）和 .show-md 在 MD 内部定义 .hide-xs（不在 LG 中，因为正如我们所说，即使你去特大， .show-md 类适用于 this-or-larger 规则。）
响应式表
让我们看看你可以用你的桌子做什么：
使用DIV！ （而不是table）
为移动 XS 设计 CSS（将所有元素保留为 block），就像您希望在移动设备上看到它们一样。
隐藏 XS 的“标题”，使其对 SM 可见（因此也会应用更大的标题，记得吗？）
对于SM（或更高）将.table的display:属性设置为table，将.row设置为table-row;，并将.row > div的直系子级设置为@987654342 @
示例：
/* ::: GLOBALS */
*margin:0; box-sizing:border-box;
html, bodyheight:100%;
bodyfont:100%/1.3 sans-serif; color:#444; overflow-y:scroll;
/* ::: XS (Extra small devices and up) so: DEFAULT STYLES! */
.hide-xs
position:absolute;
visibility:hidden;
.table img
width:100%;
/* ::: SM (Tablets and up) */
@media (min-width: 768px)
.show-xs
position:absolute;
visibility:hidden;
.hide-xs
position:initial;
visibility:visible;
.table
display:table;
width:100%;
table-layout:fixed;
border-collapse:collapse;
.table .row
display:table-row;
.table .row > div
display:table-cell;
vertical-align:middle;
/* ::: MD (Desktop and up) */
@media (min-width: 992px)
/* ::: LG (Large desktop and up) */
@media (min-width: 1200px) <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive table example by Roko CB</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="table">
<div class="row hide-xs">
<div>Image</div>
<div>Color</div>
<div>Sample</div>
<div>Desc</div>
<div>Price</div>
</div>
<!-- ROW -->
<div class="row">
<!-- CELLS -->
<div><img src="//placehold.it/170x80/faf"></div>
<div><span class="show-xs">Color:</span> #faf</div>
<div><span class="show-xs">Sample:</span> 170x80px</div>
<div><span class="show-xs">Desc:</span> Pinky</div>
<div><span class="show-xs">Price:</span> 2.13</div>
</div>
<!-- OK, you got it -->
<div class="row">
<div><img src="//placehold.it/170x80/ffa"></div>
<div><span class="show-xs">Color:</span> #ffa</div>
<div><span class="show-xs">Sample:</span> 170x80px</div>
<div><span class="show-xs">Desc:</span> Yelly</div>
<div><span class="show-xs">Price:</span> 1.90</div>
</div>
<div class="row">
<div><img src="//placehold.it/170x80/afa"></div>
<div><span class="show-xs">Color:</span> #afa</div>
<div><span class="show-xs">Sample:</span> 170x80px</div>
<div><span class="show-xs">Desc:</span> Greeny</div>
<div><span class="show-xs">Price:</span> 0.90</div>
</div>
<div class="row">
<div><img src="//placehold.it/170x80/aaf"></div>
<div><span class="show-xs">Color:</span> #aaf</div>
<div><span class="show-xs">Sample:</span> 170x80px</div>
<div><span class="show-xs">Desc:</span> Purply</div>
<div><span class="show-xs">Price:</span> 1.00</div>
</div>
</div>
</body>
</html>回顾一下，我没有说不要使用 Bootstrap，我只是想说了解一些最佳实践，了解 CSS工作原理，Bootstrap 的工作原理，并最终决定什么最适合您的项目。
【讨论】：
以上是关于使表格内容响应屏幕大小的主要内容，如果未能解决你的问题，请参考以下文章