Question

我正在创建一个包含图片和文本内容（四行，五列）的表格，我正在寻找使内容适应屏幕的最佳方法，而无需从左向右滚动以阅读它。所以在笔记本电脑上它会显示为五列，但在移动屏幕上可能只有一两列。

我已经看到了制作一堆容器，div等的建议，并手动使它们像桌子一样在页面上对齐。我不确定如何做到这一点，以达到与我当前表相同的效果。我很感激任何帮助和建议！

Answer 1

jsBin demo - Responsive Table（没有引导程序）

而不是告诉你 ＆＃34; ...只是使用Bootstrap＆＃34; （155KB的东西你几乎不会使用和理解，并且会失败宝贵的时间搜索操作方法）...

这是一所小型学校如何 回应地思考 和实际上理解你正在做的地狱。

想一想 Mobile-First 方式：

添加到您网页的标题中：

<meta name="viewport" content="width=device-width, initial-scale=1">

在 CSS 中，编写类似于您为超小型设备设置样式的代码<768px(or higher) 作为默认值。
因此无论你写什么默认，它都将适用于所有其他（更大）尺寸，除非在特定（更高）@media尺寸内的某些点被覆盖并添加为同一元素的class名称：

/* ::: 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内部，您只需要在.hide-xs（不在SM内）和XS内.show-md内定义MD（不在LG中，因为我们说过，甚至如果你去了特大号，那么班级.show-md适用于这个或更大的规则。）

响应表

很高兴看到你可以用你的桌子做什么：

使用DIV！（而不是table）
为移动XS设计CSS（将所有元素保留到block），就像您希望在移动设备上看到它们一样。
隐藏＆＃34;标题＆＃34;对于XS，使它们对SM可见（因此也会更大，请记住吗？）
对于SM（或更高），将display:的{{1}}属性设置为.table，将table设置为.row和table-row;到.row > div

实施例

＆＃13;

table-cell

＆＃13;

/* ::: GLOBALS */
*{margin:0; box-sizing:border-box;}
html, body{height:100%;}
body{font: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) {}

＆＃13;

总结一下，我没有说不要使用Bootstrap ，我只是想说它能够知道某些最佳实践，了解CSS的工作原理，Bootstrap的工作原理，最终决定什么是最适合您项目的。

使表格内容响应屏幕大小

1 个答案:

想一想 Mobile-First 方式：

响应表

实施例