Question

我有一张巨大的桌子（6 x 10），只能容纳不同尺寸250x60到最小尺寸80x60的徽标图像

这是我的HTML代码，在手机或平板电脑上查看时，我需要一种方法将其分解为更长但更窄的表格。你可以给我带头，以便我可以通过它挖掘:)我使用的是WordPress，主题是响应式的，所以目前唯一需要关注的部分是这个表。

我可以使用纯CSS执行此操作，还是应该使用jQuery更改表3x20版本？我用google搜索响应式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>

Answer 1

DIV可能会也可能不会起作用，但这可以通过CSS和媒体查询来完成。

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

DIV可能是更好的解决方案，但我想把它作为一种替代方案......您可以使用纯CSS重新构建表格，以实现响应式设计。

http://jsfiddle.net/ruhnq/

Answer 2

一些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个元素。

Answer 3

您可能想尝试Footable

或者如果你使用bootstrap作为主题，你可以简单地用

围绕你的桌子

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

动态或响应式HTML表

3 个答案: