Question

我有一个HTML表格，对于小屏幕来说太宽了。我试图摆脱这个表，并使用列表和div来设计更具响应性。

这是我提出的HTML：

<ul>
    <li class="fixture">
        <div class="fixture-date">01/09/2014 20:00</div>
        <div class="fixture-details">
            <div class="home-team">Team A</div>
            <div class="result">Result</div>
            <div class="away-team">Team B</div>
        </div>
        <ul class="forecasts">
            <li class="player-forecast">
                <div class="player">Player 1</div>
                <div class="forecast">Forecast</div>
                <div class="score">3.0</div>
            </li>
            ...
        </ul>
    </li>
    ...
</ul>

我想在小屏幕上看起来像这样：

 ----------------------------------------------------
| 01/09/2014                                         |
|----------------------------------------------------|
|             Team A |  Result  | Team B             |
|----------------------------------------------------|
|    Player 1        | Forecast |               3.0  |
|----------------------------------------------------|
|    Player 2        | Forecast |               0.0  |

在宽屏幕上这样：

                                                  |    Player 1    |    Player 2    |
------------------------------------------------------------------------------------|
| 01/09/2014 |      Team A | Result | Team B      | Forecast | 3.0 | Forecast | 0.0 |
|-----------------------------------------------------------------------------------|
| 01/09/2014 |      Team C | Result | Team D      | Forecast | 1.0 | Forecast | 2.0 |

我已经设定了迄今为止取得的成就：http://jsfiddle.net/vwanr2gx/

我还没有找到一种方法将夹具的所有“单元”放在同一行上，并为同一“列”中的“单元”保持相同的宽度。我不能硬编码团队的单元格宽度，因为我不知道内容（用户生成）。

我曾尝试使用css表，但由于我有嵌套的div，它会自动创建新行（请参阅小提琴）。

如何实现（如果可能）？

Answer 1

我不知道你是否找到了这个问题的解决方案，但这是我开发的问题。这些是细节：

保留您的HTML代码（将一些ul / li标记替换为div，但它可能适用于您的列表只需对样式进行少量更改），并更改了CSS取决于媒体宽度。
如果是“大显示”，则只会显示第一行的玩家名称。
float:left，float:left，float:left ...

您可以在此处查看一个有效的示例：http://jsfiddle.net/yuL0pvgt/1/。这是我使用的CSS代码：

* {
    border-collapse:collapse;
    margin:0px;
    padding:0px;
    font-size:12px;
}
#mytable {
    display:table;
    width:100%;
}
.fixture {
    display:table-row;
}
.fixture-date {
    display:block;
}
.fixture-details {
    display:block;
    height:auto;
    overflow:auto;
}
.fixture-details .home-team {
    float:left;
    width:40%;
    text-align:right;
}
.fixture-details .result {
    float:left;
    width:20%;
    text-align:center;
}
.fixture-details .away-team {
    float:left;
    width:40%;
    text-align:left;
}
.forecasts {
    display:block;
}
.forecasts .player-forecast {
    display:block;
}
.forecasts .player-forecast .player {
    float:left;
    width:40%;
    text-align:left;
}
.forecasts .player-forecast .forecast {
    float:left;
    width:20%;
    text-align:center;
}
.forecasts .player-forecast .score {
    float:left;
    width:40%;
    text-align:right;
}
@media all and (min-width: 500px) {
    .fixture {
        vertical-align:bottom;
        height:auto;
        overflow:auto;
        width:100%;
    }
    .fixture-date {
        display:inline-block;
        width:20%;
        height:auto;
        overflow:auto;
    }
    .fixture-details {
        display:inline-block;
        width:35%;
    }
    .forecasts {
        display:inline-block;
        width:45%;
        height:auto;
        overflow:auto;
    }
    .forecasts .player-forecast {
        display:inline-block;
        float:left;
        width:33.33%;
        line-height:auto;
        overflow:auto;
    }
    .forecasts .player-forecast .player {
        width:100%;
        text-align:center;
    }
    .forecasts .player-forecast .forecast {
        width:50%;
    }
    .forecasts .player-forecast .score {
        width:50%;
        text-align:center;
    }
    .fixture:not(:first-child) .player {
        display:none;
    }
}

这是您正在寻找的解决方案类型吗？

这个解决方案还有一些挑战/事情：

修复空格：你可能会注意到行之间有一些空白（垂直），这可以使用display:inline-block修复，但是你必须水平处理空白区域（有几个关于如何在stackoverflow上修复它的帖子）
该解决方案适用于3名玩家（请注意.forecasts .player-forecast { width:33.33%; }，此33.33％应更改为100 / number_of_players以获得最佳可视化效果。）
您需要调整宽度以符合您的需求。

Answer 2

我建议你构建更智能的表，不使用标签，而是使用css3显示属性和类。这就是我做响应表的方式。

<div class="table">
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
    </div>
</div>

你的css应该是这样的：

.table { display: table; }
.tr { display: table-row; }
.td { display: table-cell; }

所以基本上你希望你的桌子“响应”的分辨率你只是说你希望你的表格单元格（.td）

.td {display: block; }

你将拥有完美的一切！这是现场演示（将分辨率设置为更高，并亲自看看:) http://jsfiddle.net/Cowwando/2jkm108u/ 此致！

Answer 3

这可能不是您正在寻找的解决方案，但如果您不介意DIV而不是TABLE，您可以尝试使用flexbox。这可以给你一些灵感：Really Responsive Tables using Flexbox

响应＆＃34;表＆＃34;

3 个答案: