构建响应式表的推荐方法答案

【问题标题】：Recommended ways to build a responsive table构建响应式表的推荐方法
【发布时间】：2021-04-18 02:22:04
【问题描述】：

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

我想让这个表格在 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>

感谢您的帮助

【问题讨论】：

标签： html css reactjs responsive-design styled-components

【解决方案1】：

您可以尝试将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>

【讨论】：

【解决方案2】：

如果你想使用 Bootstrap（我假设你这样做是因为 class="table"），那么你可以应用 d-none、d-sm-block、额外的类来实现这个目标，例如：

<tr>
 <td>Color</td>
 <td>
 <strong>Blue</strong>
 </td>
 <td class="d-none d-md-block">
 <strong>Red</strong>
 </td>
 <td class="d-none d-lg-block">
 <strong>Green</strong>
 </td>
 <td class="d-none d-lg-block">
 <strong>Purple</strong>
 </td>
</tr>

或者如果你想使用你的自定义类（更多自定义断点），那么你可以参考this post

【讨论】：