表移动响应不起作用？

Question

当我更改浏览器的大小时，我有一个正确显示的表。但在Safari或Chrome手机上无法正常工作。我该怎么办？

@media screen and  (max-width: 1323px) {

  
  table {
   
    margin-top: 50px;
    width: 80%;
    margin-left: 10%;
    display: block;
    td {

      
      padding: 40px;
      border: 1px solid #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      &:before {
        content: attr(data-label) " : ";
        -webkit-box-flex: 0;
        -ms-flex: 0 0 5em;
        flex: 0 0 5em;
        font-weight: bold;
        margin-right: 1em;
        margin-bottom: 0.25em;
      }
    }

    tr {

      &:nth-child(1) {
        display: none;
      }
      &:nth-child(2) td {
        .p1 {
          &:after {
            content: attr(data-label) " $ ";
          }
          margin: 0 auto;
          display: block;
          @include format-text(23px, $footer-red-color, "Museo Sans Cyrl 300")
        }
        .p2 {
          display: none;
        }
      }
    }

    ul {
      width: 50%;
      margin: 0 auto;
      padding: 0;
      li {
        background: url(../images/list-style.png) no-repeat left center;
        padding: 14px 0px 14px 10px;
        float: left;
        @include format-text(20px, $tablet-blue-color, "Museo Sans Cyrl 300")
      }
    }
  }
}

<table>
  <tr>
    <td>A Walnut</td>
    <td>Walnut+</td>
    <td>Walnut group</td>
  </tr>
  <tr>
    <td data-label="Walnut group">
      <div class="p1">7</div>
      <div class="p2">$</div></td>
    <td data-label="Walnut group">
      <div class="p1">12</div>
      <div class="p2">$</div></td>
    <td data-label="Walnut group">
      <div class="p1">24</div>
      <div class="p2">$</div></td>
  </tr>
  <tr>
   <td data-label="Walnut group">
      <ul class="first">
        <li>Duis aute irure dolor in reprehenderit</li>
        <li>Excepteur sint occaecat cupidatat non</li>
        <li>Sed ut perspiciatis unde omnis iste</li>
      </ul></td>
    <td data-label="Walnut group">
      <ul>
        <li>Duis aute irure dolor in reprehenderit</li>
        <li>Excepteur sint occaecat cupidatat non</li>
        <li>Sed ut perspiciatis unde omnis iste</li>
        <li>Aperiam, eaque ipsa quae ab illo</li>
      </ul></td>
    <td data-label="Walnut group">
      <ul>
        <li>Duis aute irure dolor in reprehenderit</li>
        <li>Excepteur sint occaecat cupidatat non</li>
        <li>Sed ut perspiciatis unde omnis iste</li>
        <li>Aperiam, eaque ipsa quae ab illo</li>
        <li>Beatae vitae dicta sunt explicabo.</li>
      </ul></td>
  </tr>
  <tr>
   <td data-label="Walnut group">
      <button class="footer_button">Buy</button></td>
   <td data-label="Walnut group">
      <button class="footer_button">Buy</button></td>
   <td data-label="Walnut group">
      <button class="footer_button">Buy</button></td>
  </tr>
</table>

我该如何解决这个问题？ 但我必须使用表。 当我更改浏览器的大小时，我有一个正确显示的表。但在Safari或Chrome手机上无法正常工作。我该怎么办？

Answer 1

您可以使用@media css查询来使其响应

Answer 2

根据您提供的图片和您提供的代码，很明显您为此目的使用 scss 。

尝试在处理之前将 scss 编译为普通的 css 文件并将其用作链接。

我最近测试你的代码并编译你提供的scss文件，现在看起来像预期的那样。