构建响应式表的推荐方法

问题描述

构建响应式表格的推荐方法是什么？

我想做这个表格响应低于 991px，

所以对于 768px-991px，我只想显示 3 列而不向右滚动，因为现在我遇到了这个问题。如何以响应方式隐藏最后一列？

对于 375px-768px 的断点，我想显示 2 列。有什么建议吗？

<table class="table">
                <tr>
                  <td>Title</td>
                  <td>
                    <img src="./..." alt="" />
                  </td>
                  <td>
                    <img src="./..." alt="" />
                  </td>
                  <td>
                    <img src="./..." alt="" />
                  </td>
                  <td>
                    <img src="./..." alt="" />
                  </td>
                </tr>
                <tr>
                  <td>Color</td>
                  <td>
                    <strong>Blue</strong>
                  </td>
                  <td>
                    <strong>Red</strong>
                  </td>
                  <td>
                    <strong>Green</strong>
                  </td>
                  <td>
                    <strong>Purple</strong>
                  </td>
                </tr>
                <tr>
                  <td>Lorem</td>
                  <td>
                    Lorem Ipsum is simply dummy text of the printing and
                    typesetting industry.
                  </td>
                  <td>
                    Lorem Ipsum is simply dummy text of the printing and
                    typesetting industry.
                  </td>
                  <td>
                    Lorem Ipsum is simply dummy text of the printing and
                    typesetting industry.
                  </td>
                  <td>
                    Lorem Ipsum is simply dummy text of the printing and
                    typesetting industry.
                  </td>
                </tr>
                <tr>
                  <td>Lorem Ipsum</td>
                  <td>
                    <strong>Lorem Ipsum</strong>
                  </td>
                  <td>
                    <strong>Lorem Ipsum</strong>
                  </td>
                  <td>
                    <strong>Lorem Ipsum</strong>
                  </td>
                  <td>
                    <strong>Lorem Ipsum</strong>
                  </td>
                </tr>
                <tr>
                  <td>Lorem Ipsum</td>
                  <td>8.93ibs</td>
                  <td>8.93ibs</td>
                  <td>8.93ibs</td>
                  <td>8.93ibs</td>
                </tr>
              </table>

感谢您的帮助

解决方法

您可以尝试将 display: none 到 tr td:nth-last-child(n) 添加到相应的媒体查询中。

就像这样 -

@media (max-width: 991px) {
  tr td:nth-last-child(1),tr td:nth-last-child(2) {
    display: none;
  }
}

@media (max-width: 768px) {
  tr td:nth-last-child(1),tr td:nth-last-child(2),tr td:nth-last-child(3) {
    display: none;
  }
}

<table class="table">
  <tr>
    <td>Title</td>
    <td>
      <img src="./..." alt="" />
    </td>
    <td>
      <img src="./..." alt="" />
    </td>
    <td>
      <img src="./..." alt="" />
    </td>
    <td>
      <img src="./..." alt="" />
    </td>
  </tr>
  <tr>
    <td>Color</td>
    <td>
      <strong>Blue</strong>
    </td>
    <td>
      <strong>Red</strong>
    </td>
    <td>
      <strong>Green</strong>
    </td>
    <td>
      <strong>Purple</strong>
    </td>
  </tr>
  <tr>
    <td>Lorem</td>
    <td>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </td>
    <td>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </td>
    <td>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </td>
    <td>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </td>
  </tr>
  <tr>
    <td>Lorem Ipsum</td>
    <td>
      <strong>Lorem Ipsum</strong>
    </td>
    <td>
      <strong>Lorem Ipsum</strong>
    </td>
    <td>
      <strong>Lorem Ipsum</strong>
    </td>
    <td>
      <strong>Lorem Ipsum</strong>
    </td>
  </tr>
  <tr>
    <td>Lorem Ipsum</td>
    <td>8.93ibs</td>
    <td>8.93ibs</td>
    <td>8.93ibs</td>
    <td>8.93ibs</td>
  </tr>
</table>