响应式表格，适用于桌面，但在移动设备上不完全相同

Question

我正在试用这个演示来帮助优化我正在开发的网站上的一些表格。

当我使用 chrome:

的响应测试器扩展调整大小时，演示在我的桌面上运行良好

在我的 phone 上加载时，它会内联显示所有内容，如果添加更多数据，它就会溢出：

有人知道吗？

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<style>
  body {
    font-family: "Open Sans", sans-serif;
    line-height: 1.25;
  }
  
  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;
  }
  
  @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;
    }
    table td {
      border-bottom: 1px solid #ddd;
      display: block;
      font-size: .8em;
      text-align: right;
    }
    table td::before {
      /*
        * aria-label has no advantage, it won't be read inside a table
        content: attr(aria-label);
        */
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
    }
    table td:last-child {
      border-bottom: 0;
    }
  }
</style>
</head>

<body>
  <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">,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">,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">,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">2</td>
        <td data-label="Period">01/01/2016 - 01/31/2016</td>
      </tr>
    </tbody>
  </table>
</body>

Answer 1

你能看看https://codepen.io/panchroma/pen/YzGEJPd是怎么找你的吗？

我所做的唯一更改是添加文档类型并将@media 断点提高到 950px

祝你好运！

   <!doctype html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title></title>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
      <style>
        body {
          font-family: "Open Sans", sans-serif;
          line-height: 1.25;
        }

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

        @media screen and (max-width: 950px) {
          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;
          }

          table td {
            border-bottom: 1px solid #ddd;
            display: block;
            font-size: .8em;
            text-align: right;
          }

          table td::before {
            /*
              * aria-label has no advantage, it won't be read inside a table
              content: attr(aria-label);
              */
            content: attr(data-label);
            float: left;
            font-weight: bold;
            text-transform: uppercase;
          }

          table td:last-child {
            border-bottom: 0;
          }
        }
      </style>
    </head>

响应式表格，适用于桌面，但在移动设备上不完全相同

Responsive tables, works on desktop but not exactly the same on mobile

html

css

responsive-design

responsive