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

【问题标题】：How do I make CSS control my HTML table?如何让 CSS 控制我的 HTML 表格？
【发布时间】：2013-03-05 09:40:47
【问题描述】：

我有一个类似于This one 的表格，看起来像：

<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>

当用户在移动设备上加载页面时，我想做的事情是让它显示为This one，看起来像这样：

<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 年前）？

【问题讨论】：

您可以使用 CSS 媒体查询来应用它。

标签： javascript html css html-table css-tables

【解决方案1】：

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

【讨论】：

很抱歉回答了特别提出的问题。
没问题，因为反对票不会打扰我。我只使用这项服务来获得“答案”，就像我几天前以赏金发布的那样。
根据您的评论，他们不会打扰您，我必须假设他们确实这样做了...我试图通过手机这么说，但帖子失败了。你没有回答具体问题。此外，根据您上面的答案和评论，它可以在客户端完成，无需 JavaScript。给我一个公平的描述为什么这些不起作用，我将删除反对票。 :)
问题询问是否可以在不使用 JavaScript 的情况下完成...仅使用 HTML 和 CSS。如果您使用任何服务器端，那么您就没有使用纯 HTML……您将使用另一种编程语言即时创建 HTML。例如，您不能使用服务器端语言并且仍然有一个名为 *.html 的页面。那我怎么没有最准确地回答这个问题呢？
那么，您是说媒体类型 CSS（我倾向于使用它）和流畅的页面样式不起作用？我仍然“必须”使用 PHP 或 JavaScript？

【解决方案2】：

1- 您可以使用流畅的方法see this 为您的网站设置样式

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

【讨论】：