使用CSS将两个TD从一个TR堆叠在一起

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