只用html和css，就能实现表格移动响应的技巧

╰半橙微兮° 2023-09-28 23:02 12阅读 0赞

> 这是一个非常棒的技巧，赶紧Get吧！

扫码关注《Java学研大本营》，加入读者群，分享更多精彩

响应式设计是指调整设计以适应不同尺寸的屏幕。表格是用户界面上最常用的表示和组织数据的组件之一，但在移动端设置其响应性从来都不是一件容易的事。

![94a05eb811613ffe640d1b97e60e17b5.png][]

在网络上几乎随处可见的在移动端设置表格响应性的最常见的做法是将表格的容器div样式化。

overflow-x:auto;

就像这样：

<div style="overflow-x:auto;">
      <table>
        ..table headers and rows
      </table>
    </div>

有了上面的代码，当你在像手机这样的小宽度设备上时，数据会被显示出来，但你需要向X方向滚动，在我看来，这对用户来说并不友好，但这是一个进步。

这促使我去寻找一种更方便的方法，使表格在小设备上响应，甚至更方便用户使用。

谁能不喜欢这样呢？

![95be67095bbaa5c35142784a3a178039.gif][]

在本教程中，我想与你分享我遇到的一个非常简单的CSS技巧，它可以使每个表格都有响应性，无论该表格有多大。

请记住，这只需要使用HTML和CSS就可以实现。听起来，很有趣吗？我知道是的。

不用多说了。

我们要做的是使用 "响应式设计 "原则来检测屏幕是否小于我们表格的最大压缩率。如果是这种情况，我们将重新设置表格的格式，但不要担心，没有什么是困难的。

让我们使用这个简单的表格：

<table>
      <caption>Statement Summary</caption>
      <thead>
        <tr>
          <th scope="col">Account</th>
          <th scope="col">Due Date</th>
          <th scope="col">Amount</th>
          <th scope="col">Period</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-label="Account">Visa - 3412</td>
          <td data-label="Due Date">04/01/2016</td>
          <td data-label="Amount">$1,190</td>
          <td data-label="Period">03/01/2016 - 03/31/2016</td>
        </tr>
        <tr>
          <td scope="row" data-label="Account">Visa - 6076</td>
          <td data-label="Due Date">03/01/2016</td>
          <td data-label="Amount">$2,443</td>
          <td data-label="Period">02/01/2016 - 02/29/2016</td>
        </tr>
        <tr>
          <td scope="row" data-label="Account">Corporate AMEX</td>
          <td data-label="Due Date">03/01/2016</td>
          <td data-label="Amount">$1,181</td>
          <td data-label="Period">02/01/2016 - 02/29/2016</td>
        </tr>
        <tr>
          <td scope="row" data-label="Acount">Visa - 3412</td>
          <td data-label="Due Date">02/01/2016</td>
          <td data-label="Amount">$842</td>
          <td data-label="Period">01/01/2016 - 01/31/2016</td>
        </tr>
      </tbody>
    </table>

这就是HTML的全部内容。

让我们添加一些样式，使其更加完美

table {
      border: 1px solid #ccc;
      border-collapse: collapse;
      margin: 0;
      padding: 0;
      width: 100%;
      table-layout: fixed;
    }
    
    table caption {
      font-size: 1.5em;
      margin: .5em 0 .75em;
    }
    
    table tr {
      background-color: #f8f8f8;
      border: 1px solid #ddd;
      padding: .35em;
    }
    
    table th,
    table td {
      padding: .625em;
      text-align: center;
    }
    
    table th {
      font-size: .85em;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

上面的表格看起来像这样：

### 在桌面上 ###

![99e61798a262444c8b50dd1346e835b0.png][]

在桌面上一切都很好，我想没有人可以不满意的。

### 在手机上 ###

![1b88da515adf04c667f8aa8f1234a068.png][]

我希望你能看到，在我们使用我们的技巧之前，内容是如何被拉长的。当然，它的外观不能让你的脸上有笑容。

正如你从上面的结果所看到的，上面的代码只是给了我们一个正常的表格，但我希望你在这里要小心，你有没有注意到我在我们的HTML中的每一个数据上添加了`data-label`属性？你对它的内容有什么认识？

你可能已经注意到了，每个td的data-label属性的内容都相当于该表的表头。

不要感到困惑，这没有什么奇怪的。只需等待一下，看看它对我们有什么用处。

对于css，我们将添加一些其他的代码来使我们的表格在小设备上看起来更好。重点是要知道在移动设备上发生了什么。其他的都是正常的。

@media screen and (max-width: 600px) {
      table {
        border: 0;
      }
    
      table caption {
        font-size: 1.3em;
      }
    
      table thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
      }
    
      table tr {
        border-bottom: 3px solid #ddd;
        display: block;
        margin-bottom: .625em;
      }
    
     /*Here we are setting each td display to block*/
      table td {
        border-bottom: 1px solid #ddd;
        display: block;
        font-size: .8em;
        text-align: right;
      }
    
    /*
    Now the other data-label we have added on each td comes into play.
    */
    
      table td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
      }
    
      table td:last-child {
        border-bottom: 0;
      }
    }

让我们看看这对我们的表格的美观有什么影响。

![78e1b2848fa2ec2d133d50421aa4ad24.png][]

你知道吗，微笑，我们已经做到了。

![d6c80dad977aa642fd54223309c3c2c1.png][]

总结一下，这个教程是关于一个非常棒的技巧，即使在小设备上也能使表格看起来更好，而不管表格有多大。我希望这对你来说不是那么困难。

注意：如果你想使用这些代码，请访问这个链接，它将带你到代码库。（https://codepen.io/turinumugisha\_s/pen/GRxxaPL）

![21b824acf72f406d9d2db14d34f685e3.png][]

参考文章：https://dev.to/turinumugisha\_s/the-most-awesome-trick-for-tables-mobile-responsiveness-you-will-ever-need-32cp

### 推荐书单 ###

#### 《HTML5+CSS3+JavaScript从入门到精通》 ####

![a63f54f18a294bc514e109689fc0fdbf.jpeg][]

购买链接：https://item.jd.com/12659883.html

**《HTML5+CSS3+JavaScript从入门到精通（微视频精编版 套装共2本）/软件开发微视频讲堂》**内容浅显易懂，实例丰富，详细介绍了HTML5+CSS3+JavaScript开发需要掌握的各类实战知识。

全书分为两册：核心技术分册和强化训练分册。核心技术分册共17章，包括HTML，基础、文本、图像和超链接、CSS3概述、CSS3高级应用、表格与标签、列表、表单、多媒体、HTML5新特性、JavaScript基础、绘制图形、文件与拖放、JavaScnpt对象编程、响应式网页设计、响应式组件、课程设计——游戏公园等内容。通过学习，读者可快速开发一些中小型应用程序。强化训练分册共15章，通过大量源于实际生活的趣味案例，强化上机实践，拓展和提升软件开发中对实际问题的分析与解决能力。

![ef312cc7c2024983e3797858c4aa81e3.jpeg][]

> > > > ### 精彩回顾 ###
> > 
> > [想要代码干净又整洁？这里有十大原则][Link 1]
> > 
> > [Java面试宝典大集锦][Java]

> > 扫码关注《Java学研大本营》，加入读者群，分享更多精彩

[94a05eb811613ffe640d1b97e60e17b5.png]: https://img-blog.csdnimg.cn/img_convert/94a05eb811613ffe640d1b97e60e17b5.png
[95be67095bbaa5c35142784a3a178039.gif]: https://img-blog.csdnimg.cn/img_convert/95be67095bbaa5c35142784a3a178039.gif
[99e61798a262444c8b50dd1346e835b0.png]: https://img-blog.csdnimg.cn/img_convert/99e61798a262444c8b50dd1346e835b0.png
[1b88da515adf04c667f8aa8f1234a068.png]: https://img-blog.csdnimg.cn/img_convert/1b88da515adf04c667f8aa8f1234a068.png
[78e1b2848fa2ec2d133d50421aa4ad24.png]: https://img-blog.csdnimg.cn/img_convert/78e1b2848fa2ec2d133d50421aa4ad24.png
[d6c80dad977aa642fd54223309c3c2c1.png]: https://img-blog.csdnimg.cn/img_convert/d6c80dad977aa642fd54223309c3c2c1.png
[21b824acf72f406d9d2db14d34f685e3.png]: https://img-blog.csdnimg.cn/img_convert/21b824acf72f406d9d2db14d34f685e3.png
[a63f54f18a294bc514e109689fc0fdbf.jpeg]: https://img-blog.csdnimg.cn/img_convert/a63f54f18a294bc514e109689fc0fdbf.jpeg
[ef312cc7c2024983e3797858c4aa81e3.jpeg]: https://img-blog.csdnimg.cn/img_convert/ef312cc7c2024983e3797858c4aa81e3.jpeg
[Link 1]: https://mp.weixin.qq.com/s?__biz=MzkzMDM3MjI3Nw==&mid=2247484467&idx=1&sn=a03c98cecf89bf808a36ea3a342c411a&chksm=c27a0be9f50d82ff7c33fc58d06ba1c3c40e4002f3ad2536cc6d23b0754cef741c0740ed1e5f#rd
[Java]: https://mp.weixin.qq.com/s?__biz=MzkzMDM3MjI3Nw==&mid=2247484124&idx=1&sn=61ec6ebde6fa4f60e74caa88123e5d25&chksm=c27a0d06f50d8410bdcce1a968f5d73a46e9d5870dbcf9721a478e4826118e31f31c38be5353#rd