Question

我有一个简单的表，如果在桌面上查看分辨率将显示为正常的html数据表。但对于移动设备，我希望显示器有点差异。 HTmL代码：

<table>
    <tr>
        <th>Booking Time</th>
        <th>Pax</th>
        <th>Name</th>
        <th>Mobile</th>
        <th>Email</th>
    </tr>

    <tr>
        <td>07:30PM</td>
        <td>3</td>
        <td>Kevin</td>
        <td>0104321248</td>
        <td>advoworks@hotmail.com</td>
    </tr>
    <tr>
        <td>08:30PM</td>
        <td>4</td>
        <td>John</td>
        <td>01241234123</td>
        <td>greatone@hotmail.com</td>
    </tr>

</table>

桌面将按正常情况显示表格标题和数据行。

表格的移动版本应隐藏表格标题，并以3行格式显示数据，例如：

Time, Pax
Name, Phone number
Email

移动版基本上会有3行和34行。对于每一行表数据，隐藏原始表头。

我现在拥有的CSS是隐藏表格标题，但是我把这些列重新排列成行。

@media only screen and (max-width: 760px)  {

th {
    display: none;
}
}

有人能指出我正确的方向吗？

Answer 1

尝试将所有内容都设为一个类并以这种方式控制它们。

FIDDLE

<强> HTML

<table>
    <thead>
        <tr>
            <th class="cell-time">Booking Time</th>
            <th class="cell-pax">Pax</th>
            <th class="cell-name">Name</th>
            <th class="cell-mobile">Mobile</th>
            <th class="cell-email">Email</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td class="cell-time">07:30PM</td>
            <td class="cell-pax">3</td>
            <td class="cell-name">Kevin</td>
            <td class="cell-mobile">0104321248</td>
            <td class="cell-email">advoworks@hotmail.com</td>
        </tr>
        <tr>
            <td class="cell-time">08:30PM</td>
            <td class="cell-pax">4</td>
            <td class="cell-name">John</td>
            <td class="cell-mobile">01241234123</td>
            <td class="cell-email">greatone@hotmail.com</td>
        </tr>
    </tbody>
</table>

<强> CSS

@media only screen and (max-width: 760px)  {
    thead {
        display: none;
    }
    table {
        border-collapse: collapse;
    }
    table, tbody, tr, td {
        display: block;
        width: 100%;
    }
    tr {
        overflow: hidden;
    }
    td {
        padding: 0;
    }
    td.cell-time, td.cell-pax,
    td.cell-name, td.cell-mobile {
        float: left;
        width: 50%;
    }
}

Answer 2

如何将类归类为<td>元素，如class="col1"和class="col2"，并从中控制布局（即浮点数）。

Answer 3

基本上你不能用CSS修改HTML标签的结构，如Table，No of Rows和Columns。您可以做的是以一种根据屏幕重新排列的方式更改元素的CSS。

在这里，您无法使用CSS将<td>拆分为两行，为此您需要创建另一个<tr>，而单独使用CSS是不可能的。您可以做的是，使用<div>实现格式化表格。

检查DEMO ： http://jsfiddle.net/W327n/1/

HTML：

<div class="master">
    <div class="title">
        <div>Booking Time</div>
        <div>Pax</div>
        <div>Name</div>
        <div>Mobile</div>
        <div>Email</div>
    </div>
    <div class="data clear">
        <div>xxxxx</div>
        <div>xxx</div>
        <div>xxxxxxxx</div>
        <div>xxxxxxxx</div>
        <div>xxxxxxxxxx</div>
    </div>
</div>

CSS：

.master{
    width:100%;
    background:#eaeaea;
}
.title div{
    width:20%;
    float:left;
    background:#dadada;
}
.data div{
    width:20%;
    float:left;
    background:#eaeaea;
}
@media only screen and (max-width: 760px)  {
    .title{
        display: none;
    }
    .data div{
        width:50%;
    }
}

Answer 4

一个简单的策略是将表和行设置为块，将单元格设置为内联，并根据需要在单元格的文本之间放置换行符。使用CSS生成换行有点棘手（除非您想要在display: block之前和之后生成它们）：使用生成的内容，使用U + 000A LINE FEED作为内容和换行符（ white-space属性）设置为预格式化文本，即按原样显示换行符。

以下示例还在记录之间绘制了一条水平线，因为我认为它们应该以某种方式在视觉上分开。您也可以使用一些垂直边距或交替背景颜色。

@media only screen and (max-width: 760px)  {

th {
    display: none;
}

table, tr {
    display: block;
}

tr {
    border-bottom: solid thin #99c;
}

td {
    display: inline;
}

td:nth-child(2n):after {
    content: "\a";
    white-space: pre;
}

}

Answer 5

不确定是否要编写自己的响应表，但如果您正在寻找CSS框架，那么Foundation会为它们提供一些不错的选择：

http://foundation.zurb.com/responsive-tables.html

希望这有帮助。

Answer 6

以下代码对我有用，但显示的是行，

@media only screen and (max-width: 780px) {
    table tr td {
    display:table;
    display:block;
    }
}

使用CSS的响应表

6 个答案: