CSS中的响应式表格答案

【问题标题】：responsive tables in cssCSS中的响应式表格
【发布时间】：2014-09-04 04:49:45
【问题描述】：

我正在尝试使以下jsfiddle 代码工作。实际上一切正常，对于服务器端，我使用的是 ColdFusion。

这些值连续出现 6 个。 6 在 ColdFusion 变量中是硬编码的，因此它将值分成 6 和下一行。

现在我想让它成为一个响应式的，所以它应该可以在平板电脑和移动设备上使用而不会给 a****s 带来太多痛苦

这是我生成的小提琴

http://jsfiddle.net/9arpxvga/

这需要帮助实现响应式设计...

一个 Jquery，javascript 解决方案也可以工作

【问题讨论】：

可能重复？ stackoverflow.com/questions/23201874/…

标签： javascript jquery html css

【解决方案1】：

您将很难为如此广泛的问题找到一个客观的解决方案。因此，概括地说：实现响应式设计的众多方法之一是编写针对各种屏幕尺寸的 CSS 媒体查询。这是一个来自 getskeleton.com 的示例 sn-p（如果您需要一个准系统的响应框架来帮助您入门，这可能值得一试）

    /* #Media Queries
================================================== */

  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) {}

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {}

  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {}

  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {}

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {}

您只需为您尝试定位的每个屏幕尺寸编写新的 CSS（或覆盖您的 CSS）。（在每个媒体屏幕之后将您的 CSS 嵌套在括号内）。希望对您有所帮助。

【讨论】：