如何让CSS控制我的HTML表格？

Question

我有一个与此表类似的表，如下所示：

<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现在是否提供rowpan / colspan选项（这是我上次尝试使用的时间，但它是3-5年前）？

Answer 1

1您可以通过使用流体方法风格您的网站看到这

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

Answer 2

如果您希望在不使用服务器端脚本语言（例如ASP，CGI或PHP）的情况下维护HTML，那么您将不可避免地使用JavaScript。 否则，您将无法检测到正在使用哪个设备或操作系统。