时间戳

首页 > 解决方案 > 使用 CSS 为小屏幕重新格式化表格 - 将列保持在一起

css - 使用 CSS 为小屏幕重新格式化表格 - 将列保持在一起

问题描述

我有一个包含多行和多列的表。它在大型显示器上运行良好，但我正在努力使其更容易在手机上阅读，并且我可以通过将其设置为一列宽和多列高来轻松呈现小型手机的信息。将当前列放在一起对我来说很重要，否则我正在考虑将其设置为显示：块。

<table>
<tr><td>COL 1</td><td>COL 2</td><td>COL 3</td><td>COL 4</td><td>COL 5</td></tr>
<tr><td>COL 1</td><td>COL 2</td><td>COL 3</td><td>COL 4</td><td>COL 5</td></tr>
<tr><td>COL 1</td><td>COL 2</td><td>COL 3</td><td>COL 4</td><td>COL 5</td></tr>
</table>

有什么办法可以让我的专栏保持在一起？我想保持这样：

COL 1
COL 1
COL 1
COL 2
COL 2
COL 2
COL 3
COL 3
COL 3
COL 4
COL 4
COL 4
COL 5
COL 5
COL 5

标签： csshtml-table

解决方案

如果您愿意放弃table标签/结构并且不需要强大的 IE 支持，您可以使用CSS Grid来做到这一点

/*Rugular  7 Wide Grid for wide screen*/
#schedule {
display:grid; 
grid-template-columns: repeat(7, 1fr);
}

.head {font-weight:bold;}

/*Style for narrow - adjust max-width as needed*/
@media screen and (max-width: 480px)
{

  /*Change to 1 col*/
  #schedule {grid-template-columns:1fr;}
  /*Re order the content*/
  #schedule > :nth-child(7n + 1) {order:1;}
  #schedule > :nth-child(7n + 2) {order:2;}
  #schedule > :nth-child(7n + 3) {order:3;}
  #schedule > :nth-child(7n + 4) {order:4;}
  #schedule > :nth-child(7n + 5) {order:5;}
  #schedule > :nth-child(7n + 6) {order:6;}
  #schedule > :nth-child(7n + 7) {order:7;}
  
  /*Add some spacing to the groups*/
  .head:not(:first-child) {margin-top:0.5em;}
}
<div id="schedule">
  <!-- "Header" Row -->
  <div class="head">Mon</div><div class="head">Tues</div><div class="head">Wed</div><div class="head">Thurs</div><div class="head">Fri</div><div class="head">Sat</div><div class="head">Sun</div>
  <!-- First Row -->
  <div>Mon 1</div><div>Tues 1</div><div>Wed 1</div><div>Thurs 1</div><div>Fri 1</div><div >Sat 1</div><div>Sun 1</div>
  <!-- Second Row -->
  <div>Mon 2</div><div>Tues 2</div><div>Wed 2</div><div>Thurs 2</div><div>Fri 2</div><div >Sat 2</div><div>Sun 2</div>
</div>

推荐阅读