响应式布局进阶篇 – 响应式表格

作者 | Brilliant Open Web团队

本文继续在响应式布局上深入讨论,主要通过多个实际例子,探讨表格在不同设备下的响应式布局方式,以提供良好的用户体验。

当我们有大量结构化数据需要在页面上展现时,通常会使用表格。但如果表格的列超过一定数量,它们很有可能会溢出视口。在视口较窄的设备上,较宽的表格可能会强迫用户通过水平滚动才能浏览全部内容。有一些办法能优化这个问题,接下来我们会由易到难,介绍多种响应式表格的布局方式,分别是隐藏表格列表格容器内滚动表格重组固定表格行列

 

固定列示意图

 

隐藏表格列

对于表格展现的数据来说,可能不是每一列都十分重要。我们可以通过媒体查询,在视口较窄的时候,隐藏表格里一些不太重要的信息。

@media screen and (max-width: 599px) {  .non-critical-col {    display: none;  }}

隐藏表格列通过一个很直接的方式,使得表格能在窄视口设备上较好地展现。这样做最大的问题是,向用户隐藏了一部分结构化数据。如果用户确实需要获取这些数据,那他们别无选择,只能更换设备浏览了。所以,隐藏表格列需要谨慎,如果有可能,可以尝试使用缩写来展示数据。

表格容器内滚动

另一个比较简单的响应式表格实现是,把表格放在一个容器里,仅使该容器在水平方向可滚动。

<div class="table-container">  <table>    <!-- ... -->  </table></div>
.table-container {  width: 100%;  overflow: auto;}

仅使表格在容器滚动,可以避免页面出现水平滚动条,从而影响整个页面的浏览体验,同时也兼顾了表格数据展现的完整性。

 

表格重组

将表格的每一列转换为一行,可以将表格转换为普通的列表来展现。表格进行重组后,表头位于列表的最左边一列。我们可以通过媒体查询实现表格重组。

表格重组示意图

@media screen and (max-width: 599px) {  table {    border-spacing: 0;  }  table, tbody, tr, th, td {    display: block;  }  thead { /* 隐藏真实表头 */    display: none;  }  tr {    border-bottom: 1px solid #e0e0e0;  }  td {    position: relative;    height: 28px;    padding-left: 50%; /* 数据列左边留 50% 空间给新的表头 */    border-bottom: 1px solid #e0e0e0;    text-align: center;    background: #fff;  }  td::before {    content: attr(data-th); /* 使用 data-th 属性生成新的表头 */    position: absolute;    left: 25%;    transform: translateX(-50%); /* left 与 transform 配合实现表头居中 */    font-weight: 700;  }}
<table>  <thead>    <tr>      <th>Name</th>      <th>1st</th>      <th>2nd</th>      <th>3rd</th>      <th>4th</th>      <th>5th</th>      <th>Total</th>    </tr>  </thead>  <tbody>    <tr>      <td data-th="Name">Alice</td>      <td data-th="1st">0</td>      <td data-th="2nd">0</td>      <td data-th="3rd">1</td>      <td data-th="4th">0</td>      <td data-th="5th">4</td>      <td data-th="Final">5</td>    </tr>    <tr>      <td data-th="Name">Bob</td>      <td data-th="1st">0</td>      <td data-th="2nd">2</td>      <td data-th="3rd">0</td>      <td data-th="4th">4</td>      <td data-th="5th">0</td>      <td data-th="Final">6</td>    </tr>  </tbody></table>

表格重组的好处是,所有数据在视口内都是可展现的,不需要用户进行水平滚动。但这破坏了表格的原始组织形式,用户可能会感觉到数据展示不够直观。

 

固定表格行列

通过 position: sticky 可以使表格的行列固定,从而这些行列不会在滚动时移出视口。如下面的例子中,固定了表格的第一列和最后一列,其他列可以通过水平滚动来浏览。

.table-container {  width: 100%;  overflow: auto; /* 使表格在容器内滚动 */}.table {  /* 表格共有七列,视口内始终展示五列 */  /* 包括头尾固定的两列以及中间三列,每列占 20vw 宽度 */  width140vw;  border-spacing: 0; }.table tr {  height: 56px;}.table th,.table td {  width: 20vw; /* 表格每列的宽度 */  border-bottom: 1px solid #e0e0e0;  text-align: center;  background: #fff;}.table-sticky {  position: sticky; /* 使表格列固定 */  z-index: 1;}.table-sticky:first-child {  left: 0; /* 表格第一列固定在最左边 */  border-right: 1px solid #e0e0e0;}.table-sticky:last-child {  right: 0; /* 表格最后一列固定在最右边 */  border-left: 1px solid #e0e0e0;}
<div class="table-container">  <table class="table">    <thead>      <tr>        <th class="table-sticky">Name</th>        <th>1st</th>        <th>2nd</th>        <th>3rd</th>        <th>4th</th>        <th>5th</th>        <th class="table-sticky">Final</th>      </tr>    </thead>    <tbody>      <tr>        <td class="table-sticky">Alice</td>        <td>0</td>        <td>0</td>        <td>1</td>        <td>0</td>        <td>4</td>        <td class="table-sticky">5</td>      </tr>      <tr>        <td class="table-sticky">Bob</td>        <td>0</td>        <td>2</td>        <td>0</td>        <td>4</td>        <td>0</td>        <td class="table-sticky">6</td>      </tr>    </tbody>  </table></div>

固定表格行列是一种比较优雅的解决方案,既能按照数据列的重要性展示内容,又不会造成数据缺失。在这种情况下,少量的水平滚动应该可以接受。

总结

本文首先介绍了表格在移动端下遇到的问题,随后通过四种方式,详细介绍了编写响应式表格的一些技巧。开发者可以根据实际情况,利用其中几种方式,优化不同尺寸设备呈现的表格内容,为用户提供更好的体验。但我们也可以发现,无论是哪种响应式表格,在移动端下都有一定的局限性。如果使用图表代替表格,或许会得到更好的数据展现效果。

未经允许不得转载:大自然的搬运工 » 响应式布局进阶篇 – 响应式表格

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址