动态或响应式 HTML 表格答案

【问题标题】：Dynamic or responsive HTML table动态或响应式 HTML 表格
【发布时间】：2013-08-17 20:36:18
【问题描述】：

我有一张巨大的桌子 (6 x 10)，它只能容纳从 250x60 到最小尺寸为 80x60 的各种徽标图像

这是我的 HTML 代码，当在手机或平板电脑上查看时，我需要一种方法将其分解为更长但更窄的表格。你能给我提供线索，这样我就可以深入了解它:) 我使用的是 WordPress，主题是响应式的，所以现在唯一需要注意的部分是这张表。

我可以用纯 CSS 做到这一点，还是应该使用 jQuery 来更改表格 3x20 版本？我用谷歌搜索了响应式 HTML 表格，但只得到了带有数字的表格 :(

或者也许离开表格并使用 div 代替？

<table border="0" bordercolor="#336633" style="background-color:#FFFFFF" width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
</table>

【问题讨论】：

离开表格并改用divs。浮动它们。
@godfrzero 感谢您的想法。所以我创建了 60 个 div 并浮动它们？每个 div 都会有图片，但是如何维护 6 个正常尺寸的项目和 3 个小尺寸的项目？
不要浮动单个 divs，创建一个包含 3 个 divs 的包装器并浮动包装器。这样一来，每行将获得 3 的倍数，并且组会自动跳下。

标签： html responsive-design html-table

【解决方案1】：

一些 CSS：

.awesomeWrapper {
  float: left;
}

还有一些 HTML：

<div class="awesomeWrapper">
  <div><img src="someImage" alt="Some Image"></div>
  <div><img src="someImage" alt="Some Image"></div>
  <div><img src="someImage" alt="Some Image"></div>
</div>
<div class="awesomeWrapper">
  <div><img src="someImage" alt="Some Image"></div>
  <div><img src="someImage" alt="Some Image"></div>
  <div><img src="someImage" alt="Some Image"></div>
</div>
<!-- Repeat this pattern -->

这样，当屏幕太小而无法在一行中放 6 张图片时，它会自动重组为两行，每行 3 张图片。您可以将相同的逻辑应用于 6x10 网格，它会在较小的屏幕上重新排列为 3x20。

根据您的布局的其余部分，您需要进行一些调整以确保在常规视图的一行中只显示 6 个元素。

【讨论】：

是的很好的例子，但是当我尝试它时，图像看起来很混乱。因为小图像比大图像占用更少的空间。这就是我想到 HTML 表格想法的原因。在 div 中从未设法给出相同的外观和感觉:(
当然，我假设可以在 DIV 中添加一些 height 和 width。

【解决方案2】：

DIV 可能有效，也可能无效，但这可以通过 CSS 和媒体查询来完成。

@media (max-width:450px) {
   tr { display: inline; }
   td { display:block; width:30%; float:left;}
}

DIV 可能是更好的解决方案，但我想将其作为替代方案……您可以使用纯 CSS 重构表格以实现响应式设计。

http://jsfiddle.net/ruhnq/

【讨论】：

+1 用于原始解决方案，但这不是 break under certain conditions 基于每行的元素数吗？不确定这个边缘案例是否适用于 OPs 案例，但只是把它放在那里。
你能提供一个坏掉的 jsfiddle 吗？我会继续修补......如果没有别的，这是一个很好的思考练习。
中断可以在原始小提琴本身中重现，只需尝试将输出帧的大小调整为 100% 宽度，然后再返回几次。我实际上一直在试图弄清楚它为什么会破裂：P
啊，我明白了...如果只是在您调整几次大小时会中断。可能不是大多数用户会做的事情，但仍然不是很好。将table 设置为display:inline 似乎已经解决了这个问题。 jsfiddle.net/ruhnq/2
嗯，很有趣。我仍然不完全理解它为什么坏了，或者它是如何被修复的。我想我会在有时间的时候继续玩它，如果我弄明白了就发帖：D

【解决方案3】：

你可能想试试Footable

或者如果你使用引导程序作为主题，你可以简单地用

包围你的桌子

<div class="table-responsive">
// your table HTML
</div>

【讨论】：