调整 table 以响应

Question

我正在为 freeCodeCamp 开发一个非常简单的项目。我在网站上有一个 table，但在让它适应移动设备时遇到了问题。我已使用媒体查询尝试将其外观更改为 400 像素或更小，但无济于事。

您可以看到整个项目here。

但我的问题是，为什么我的 table 在使用此代码段时不适应？据我了解，它应该不超过 400px。

@media (max-width: 400px){/*Trying to adapt to mobile*/
  #tribute-info table{
    display: fixed;
    max-width: 400px;
    height: auto;
    margin: auto;
  }
}

Answer 1

您是否尝试过将您的 table 放入 div 且 class 响应迅速。因此，您的 CSS 样式如下所示。如果你愿意，你可以将媒体查询更改为 400px，但我认为最小值 520 会更好。另请参阅媒体查询中的屏幕

.table-responsive {
    min-height: .01%;
    overflow-x: auto;
}
@media screen and (max-width: 767px) {
.table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
}
.table-responsive > .table {
    margin-bottom: 0;
}

然后记得将您的 table 放入 div 中，如下所示。

    <!-- Don't forget to wrap you table inside a div with the table-responsive class -->
<div class="table-responsive">
    <table>
      .....
    </table>
</div>

Answer 2

我的猜测是：您的 table 内容超过 400px，因此浏览器无法将 table 限制在 400px max-size。如果您在 table-content 上将 font-size 设置为 2px，您会发现效果很好。

调整 table 以响应

Adapting a table to be responsive

html

css

media-queries

responsive