Question

我正在尝试制作一个带有子标题和侧标题响应的表格，这样表格在移动设备上看起来很棒，并显示全部/部分结果。我知道这可以通过简单的标题轻松完成，但我所拥有的是附加的子标题和副标题。

此外，当它处于响应模式时，是否可以选择从表中隐藏不必要的数据？

这是我到目前为止得到的一些帮助：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing</title>
    <style type="text/css">
        table.zing {
            width: 100%;
            border: 1px solid black;
        }

            table.zing td, table.zing th {
                border: 1px solid black;
            }

            table.zing .FirstColumn {
                background-color: #9999dd;
            }

            table.zing thead tr {
                background-color: blue;
            }

            table.zing tbody.secondHeader tr {
                background-color: skyblue;
            }
    </style>
</head>
<body>
<table class="zing" cellpadding="0" cellspacing="0">
        <colgroup>
            <col class="FirstColumn">
        </colgroup>
        <thead>
            <tr>
                <th colspan="2">Object</th>
                <th colspan="2">Openings</th>
                <th colspan="3">Internal Dimensions</th>
                <th colspan="3">Weight</th>
                <th>Volume</th>
            </tr>
        </thead>
        <tbody class="secondHeader">
            <tr>
                <th>Type</th>
                <th>Size</th>
                <th>Width</th>
                <th>Height</th>
                <th>Length</th>
                <th>Width</th>
                <th>Height</th>
                <th>Max</th>
                <th>Min</th>
                <th>Tare</th>
                <th>Capacity</th>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>20 std</td>
                <td>Small</td>
                <td>300</td>
                <td>100</td>
                <td>200</td>
                <td>500</td>
                <td>700</td>
                <td>100</td>
                <td>50</td>
                <td>2.1</td>
                <td>200</td>
            </tr>
            <tr>
                <td>40 std</td>
                <td>Medium</td>
                <td>400</td>
                <td>100</td>
                <td>200</td>
                <td>500</td>
                <td>700</td>
                <td>100</td>
                <td>50</td>
                <td>2.1</td>
                <td>200</td>
            </tr>
            <tr>
                <td>50 std</td>
                <td>Large</td>
                <td>500</td>
                <td>100</td>
                <td>200</td>
                <td>500</td>
                <td>700</td>
                <td>100</td>
                <td>50</td>
                <td>2.1</td>
                <td>200</td>
            </tr>
            <tr>
                <td>60 std</td>
                <td>X-Large</td>
                <td>1500</td>
                <td>100</td>
                <td>200</td>
                <td>500</td>
                <td>700</td>
                <td>100</td>
                <td>50</td>
                <td>2.1</td>
                <td>200</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

希望得到一些帮助。

Answer 1

关于在特定设备上考虑为其添加类时隐藏列，您可以编写媒体查询以隐藏它们以用于特定的屏幕尺寸：

示例：

@media only screen and (max-width: 767px) {
    .hide-phone{display:none}
}

制作带有子标题的响应表

1 个答案: