html - 使用 CSS 将来自一个 TR 的两个 TD 堆叠在一起

Question

是否可以通过使用 CSS 将一行中的两个 tds 堆叠在一起来节省表格使用的水平空间？

作为一个简单的视觉示例，从这里开始:

Timestamp | User | Country | City | Rating
==========================================
21 Nov    | Bob  | UK      | Bath | 5
------------------------------------------
21 Nov    | Ann  | USA     | NYC  | 3
------------------------------------------

...像这样:

Timestamp | User | Country | Rating
          |      | City    |
===================================
21 Nov    | Bob  | UK      | 5
          |      | Bath    |
-----------------------------------
21 Nov    | Ann  | USA     | 3
          |      | NYC     |
-----------------------------------

此时我应该考虑使用结构化 DIV 而不是表格吗？我想坚持使用表格，以便屏幕阅读器和禁用样式表的人仍然可以阅读该页面。

Answer 1

Live Demo

您(有点)可以在 CSS3 中做到这一点，但是需要一点技巧。这不是完美/最漂亮的解决方案，但它是一个可行的解决方案。

当您呈现表格时，创建一个包含两个合并列的列。现在您可以根据浏览器的宽度显示/隐藏这些列。

这仅在您不想连接太多列时才有效，否则您将拥有一个非常大的冗余表，如果您想合并已经合并的列，困惑只会变得更大。

HTML

<table>
   <thead>
      <tr>
         <th>Timestamp</th>
         <th>User</th>
         <th>Country</th>
         <th>City</th>
         <th>Country<br/>City</th>
         <th>Rating</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>21 Nov</td>
         <td>Bob</td>
         <td>Uk</td>
         <td>Bath</td>
          <td>UK<br/>Bath</td>
         <td>5</td>
      </tr>
      <tr>
         <td>21 Nov</td>
         <td>Ann</td>
         <td>USA</td>
         <td>NYC</td>
         <td>USA<br/>NYC</td>
         <td>3</td>
      </tr>
   </tbody>
</table>

CSS

@media screen and (min-width: 500px){
    td:nth-of-type(5), th:nth-of-type(5){
        display: none;
    }
}

@media screen and (max-width: 500px){
    td:nth-of-type(3), th:nth-of-type(3), td:nth-of-type(4), th:nth-of-type(4){
        display: none;
    }
}