你需要的让表格移动响应的最棒的技巧——只使用 html 和 css

响应式设计就是调整设计以适应不同尺寸的屏幕。表格是 UI 上用于表示和组织数据的最常用组件之一，但在移动设备上设置它们的响应性从来都不是一件容易的事。

在移动设备上设置表格响应度的最常见做法是使用以下方式设置表格容器的 div

overflow-x:auto;

就像这样，

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

使用上述代码，当您在宽度较小的设备（如移动设备）上时，数据会显示，但您需要在 x 方向上滚动，在我看来这并不方便用户使用，但这是一个进步。

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

谁会不喜欢呢！

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

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

不用多说，

我们要做的是使用“响应式设计”原则（CSS @media查询）来检测屏幕是否小于表格的最大挤压尺寸。如果是这种情况，我们将重新格式化表格，但不用担心，这很容易做到。

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

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

上面的表格如下

在桌面上

桌面上的一切都很好，我想没有人会对此感到不满意。

在移动设备上

我希望您在我们使用技巧之前能够看到内容是如何被拉伸的。当然，它的外观不会让你微笑。

从上面的结果可以看出，上面的代码只是给出了一个普通的表格，但我希望你在这里要小心，你注意到我在 HTML 中data-label为每个表格添加的属性了吗？你对它的内容有什么看法？<td>

您可能已经注意到，每个 td 的 data-label 属性都具有与其<td>下面的表头相同的内容。

不要感到困惑，那里没有什么奇怪的，
只需稍等片刻，看看它对我们有何用处。

对于 CSS，我们将添加一些其他代码，以使我们的表格在小型设备上也能更好地显示。Kepp 专注于了解移动设备上的情况。其他一切都很正常。

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

让我们看看这会给我们的餐桌增添什么美感。

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

总而言之，本教程讲解了一个非常棒的技巧，无论表格有多大，都能让表格在小型设备上看起来更美观。希望这对你来说并不难。

注意：如果你想要使用这些代码，请访问此链接，它将带你进入 codepen

下一步

现在轮到您与我们分享您对这篇文章的看法，并在评论部分分享您认为值得我们关注的任何其他技巧。

感谢你们一直参与到最后。太棒了！你们这帮家伙从来都不会让人失望 (:

文章来源：https://dev.to/turinumugisha_s/the-most-awesome-trick-for-tables-mobile-responsiveness-you-will-ever-need-32cp