1

我有一个类似于这个的表，看起来像：

<table class="DynaTable">
    <tr class="DynaTableHead">
        <th class="DynaTableHeadCell-1">col 1</th>
        <th class="DynaTableHeadCell-2">col 2</th>
        <th class="DynaTableHeadCell-3">col 3</th>
        <th class="DynaTableHeadCell-4">col 4</th>
        <th class="DynaTableHeadCell-5">col 5</th>
    </tr>
    <tr class="DynaTableRow">
        <td class="DynaTableRowCell-1">cell 1-1</td>
        <td class="DynaTableRowCell-2">cell 1-2</td>
        <td class="DynaTableRowCell-3">cell 1-3</td>
        <td class="DynaTableRowCell-4">cell 1-4</td>
        <td class="DynaTableRowCell-5">cell 1-5</td>
    </tr>
    <tr class="DynaTableRow">
        <td class="DynaTableRowCell-1">cell 2-1</td>
        <td class="DynaTableRowCell-2">cell 2-2</td>
        <td class="DynaTableRowCell-3">cell 2-3</td>
        <td class="DynaTableRowCell-4">cell 2-4</td>
        <td class="DynaTableRowCell-5">cell 2-5</td>
    </tr>
    <tr class="DynaTableRow">
        <td class="DynaTableRowCell-1">cell 3-1</td>
        <td class="DynaTableRowCell-2">cell 3-2</td>
        <td class="DynaTableRowCell-3">cell 3-3</td>
        <td class="DynaTableRowCell-4">cell 3-4</td>
        <td class="DynaTableRowCell-5">cell 3-5</td>
    </tr>
    <tr class="DynaTableRow">
        <td class="DynaTableRowCell-1">cell 4-1</td>
        <td class="DynaTableRowCell-2">cell 4-2</td>
        <td class="DynaTableRowCell-3">cell 4-3</td>
        <td class="DynaTableRowCell-4">cell 4-4</td>
        <td class="DynaTableRowCell-5">cell 4-5</td>
    </tr>
</table>

当用户在移动设备上加载页面时，我想要做的事情，让它像这样显示：

<table class="DynaTable">
    <tr class="DynaTableHead">
        <th rowspan="2" class="DynaTableHeadCell-1">col 1</th>
        <th class="DynaTableHeadCell-2">col 2</th>
        <th class="DynaTableHeadCell-3">col 3</th>
        <th class="DynaTableHeadCell-4">col 4</th>
        <th class="DynaTableHeadCell-5">col 5</th>
    </tr>
    <tr class="DynaTableHead">
        <th class="DynaTableHeadCell-X" colspan="3">col 3</th>
    </tr>
    <tr class="DynaTableRow">
        <td rowspan="2" class="DynaTableRowCell-1">cell 1-1</td>
        <td class="DynaTableRowCell-2">cell 1-2</td>
        <td class="DynaTableRowCell-3">cell 1-3</td>
        <td class="DynaTableRowCell-4">cell 1-4</td>
        <td class="DynaTableRowCell-5">cell 1-5</td>
    </tr>
    <tr>
        <td class="DynaTableRowCell-X" colspan="3">cell 1-3</th>
    </tr>
    <tr class="DynaTableRow">
        <td rowspan="2" class="DynaTableRowCell-1">cell 2-1</td>
        <td class="DynaTableRowCell-2">cell 2-2</td>
        <td class="DynaTableRowCell-3">cell 2-3</td>
        <td class="DynaTableRowCell-4">cell 2-4</td>
        <td class="DynaTableRowCell-5">cell 2-5</td>
    </tr>
    <tr>
        <td class="DynaTableRowCell-X" colspan="3">cell 2-3</th>
    </tr>
    <tr class="DynaTableRow">
        <td rowspan="2" class="DynaTableRowCell-1">cell 3-1</td>
        <td class="DynaTableRowCell-2">cell 3-2</td>
        <td class="DynaTableRowCell-3">cell 3-3</td>
        <td class="DynaTableRowCell-4">cell 3-4</td>
        <td class="DynaTableRowCell-5">cell 3-5</td>
    </tr>
    <tr>
        <td class="DynaTableRowCell-X" colspan="4">cell 3-3</th>
    </tr>
    <tr class="DynaTableRow">
        <td rowspan="2" class="DynaTableRowCell-1">cell 4-1</td>
        <td class="DynaTableRowCell-2">cell 4-2</td>
        <td class="DynaTableRowCell-3">cell 4-3</td>
        <td class="DynaTableRowCell-4">cell 4-4</td>
        <td class="DynaTableRowCell-5">cell 4-5</td>
    </tr>
    <tr>
        <td class="DynaTableRowCell-X" colspan="3">cell 4-3</th>
    </tr>
</table>

如何仅使用 HTML 和 CSS 来完成这项工作？我“可以”使用 JavaScript/jquery，但我真的宁愿不要。输出才是最重要的。当移动设备加载它时，我可以从第一个输出转到第二个输出，或者我可以从移动版本转到桌面版本——这样做会使避免 JavaScript 变得不那么重要。CSS 现在是否提供 rowspan/colspan 选项（我上次尝试时没有使用，但那是 3-5 年前）？

4

2 回答 2

3

1-您可以使用流畅的方法为您的网站设置样式，请参阅此

2-您可以通过在 CSS 中使用媒体类型来做到这一点

于 2013-03-16T19:07:28.713 回答
-1

如果您想在不使用 ASP、CGI 或 PHP 等服务器端脚本语言的情况下维护 HTML，那么您无法避免使用 JavaScript。否则，您将无法检测正在使用的设备或操作系统。

于 2013-03-16T19:04:16.960 回答