时间戳

首页 > 解决方案 > 构建响应式表的推荐方法

html - 构建响应式表的推荐方法

问题描述

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

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

感谢您的帮助

标签： htmlcssreactjsresponsive-designstyled-components

解决方案

如果你想使用 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>

或者如果你想使用你的自定义类（更多自定义断点）那么你可以参考这篇文章

推荐阅读