时间戳

首页 > 解决方案 > 当屏幕尺寸缩小时，如何调整表格及其单元格的大小？

html - 当屏幕尺寸缩小时，如何调整表格及其单元格的大小？

问题描述

https://clementmihailescu.github.io/Pathfinding-Visualizer/#

我正在使用类似的表格布局，例如为我目前正在做的项目链接的表格布局，但我似乎无法弄清楚当屏幕尺寸缩小时如何不让单元格换行到新行上。在这个 Pathfinding Visualizer 项目中是如何完成的？我应该对我的表/tr/td 应用什么 CSS 属性？当我缩小屏幕尺寸时，表格的单元格会包裹到下一行，这样每隔一行就有不同的列数。我想要表格宽度，因此，表格单元格的宽度会缩小，并且每行都有相同的列，即使对于较小的屏幕尺寸也是如此。

table {
  border-collapse: collapse;
  margin-left: 8px;
  margin-right: 5px;
  position: fixed;
  bottom: 20px;

}

.grid-row {
  white-space: nowrap;
}

.square {
  background: #fff;
  border: 1px solid #999;
  padding: 0;
  height: 25px;
  width: 25px;
  margin-right: -1px;
  margin-top: -1px;
  border: 1px solid rgb(175, 216, 248)
}

标签： htmlcss

解决方案

您实际上并没有提供指向您的表格或其代码的链接。

但是，如果您实际上使用的是表结构，那么您的 white-space: nowrap; call 应该应用于您的 td 元素而不是您的 tr 元素。

同样，如果没有指向您的表格的链接，很难回答。但也许这会为您指明正确的方向？

推荐阅读