html - 响应表

Question

我需要有关响应式表格的帮助。所需要的是在调整大小时基本上将其更改为“移动版本”，但是移动版本与其主要样式略有不同，如图所示。

我目前有这个:http://jsfiddle.net/MLsZ8/

HTML:

 <table class="crafting">

    <thead>
    <tr>
    <th style="width:15%">Name</th>
    <th style="width:20%">Ingredients</th>
    <th style="width:205px;">Input &gt; Output</th>
    <th>Description</th>
    </tr>
    </thead>

    <tbody>

    <tr>
    <td>Ore Blocks</td>
    <td>Gold Ingots, Iron Ingots, Diamonds and Lapis Lazuli Dye</td>
    <td><img width="204" height="112" title="Crafting Ore Blocks" src="http://www.minecraftxl.com/images/crafting/Crafting-Ore-Blocks1.gif" alt="Crafting Ore Blocs from Ingots" /></td>
    <td>Turn ingots or diamonds into a placeable block. Can be used for storage or to show off.</td>
    </tr>

    </tbody>
    </table>

CSS:

        td {
        border:0;
        }

        table.crafting {
            border-spacing:0;
            border-collapse:collapse;
        }
        .crafting th {
            border:2px solid #f3f3f3;
            padding:5px;
        }
        .crafting td {
            border:2px solid #f3f3f3;
            padding:5px;
            vertical-align:top;
        }
        .crafting tr {
            background:#c6c6c6;
        }
        .crafting-name {
            font-weight:bold;
            border-bottom:0 !important;
            background:#c6c6c6;
        }
        .crafting-ingredients {
            border-top:0 !important;
            border-bottom:0 !important;
            background:#bcbcbc;
        }
        .crafting-img {
            width:205px;
            border-bottom:0 !important;
            border-top:0 !important;
            background:#c6c6c6;
        }
        .crafting-desc {
            border-top:0 !important;
            background:#bcbcbc;
        }

Answer 1

如果您不反对更改 HTML 的整体格式，我有一个可能更容易处理的解决方案...

如果将当前表结构更改为一系列div 元素，则可以将每个表行嵌套到一个容器div 中。

我会给你一个“行”的例子:

<div class="tableRow">
<div class="columnOne"> content </div>
<div class="columnTwo"> content </div>
<div class="columnThree"> content </div>
<div class="columnFour"> content </div>
</div>

然后，使用 CSS，您可以设置 .tableRow {width: 100%}。从这里，您可以根据需要设置列宽。从您的示例来看，您似乎可以这样做:

.columnOne {width: 10%; float: left;}
.columnTwo {width: 15%; float: left;}
.columnThree {width: 30%; float: left;}
.columnFour {width: 45%; float: left;}

然后，当您到达移动 View 断点时，使用 @media 查询，您可以执行以下操作:

.columnOne, .columnTwo, .columnThree, .columnFour {宽度:100%}

这将导致列有效地变成 width: 100% 的行。