0

我有一张巨大的桌子（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>
4

3 回答 3

2

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

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

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

http://jsfiddle.net/ruhnq/

于 2013-08-15T15:58:55.747 回答
0

你可能想试试Footable

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

<div class="table-responsive">
// your table HTML
</div>
于 2014-11-18T10:54:12.450 回答
0

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

于 2013-08-15T15:55:45.920 回答