Question

我正在尝试创建一个HTML调度应用，它可以调整创建的表的大小以适应屏幕，同时保持相同的大小比例。当我全屏时它看起来很好：。但是当我调整窗口大小或者屏幕分辨率不同的人运行它时，表格的位置会像这样混乱：。

我想知道我的CSS或JavaScript文件中是否可以做些什么来确保每个表的比例和相对位置保持不变，无论它运行的屏幕大小或分辨率如何。我将在这里包含一个JSFiddle以进一步理解：

表和定位的CSS：

/* To control the style of the overall table class */
table {
  border: 0.0625em solid black;
  text-align: center;
  table-layout: fixed;
}

th, td {
  border: 0.0625em solid black;
  width: 8.75em;
  height: 2.1875em;
}

/* Settings for Days row */
.tableDays {
  width: 8.75em;
}

/* Settings for Employee column */
.tableEmployees {
  line-height: 2.1875em;
}

/* Settings for Tasks table */
.tableTasks {
  width:100%;
  margin-top:0.3125em;
  empty-cells: show;
  height:62.5em;
  line-height: 2.1875em;
  width: 6.25em;
}

.empTaskCont {
  height: 31.25em;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  padding-bottom: 1.875em;
}

#table-wrapper-days {
  position: relative;
  width: 66.5em;
  margin-left: 15.8125em;
  /*float:right;*/
}

#table-scroll-days {
  height: auto;
  overflow-x: hidden;
}

#table-wrapper-employees {
  position: relative;
  float:left;
  width:18%;
  margin-top:0.5em;
}

#table-scroll-employees {
  width: auto;
  overflow-y: hidden;
  max-height: 31.25em;
}

#table-wrapper-tasks {
  position: relative;
  width:81%;
  float:right;
}

#table-scroll-tasks {
  overflow-x: scroll;
  overflow-y: scroll;
  max-height: 32.625em;
}

.employee-mod-btn{
  float:left;
}

JSFiddle：https://jsfiddle.net/hs5sz8kb/#&togetherjs=x3LUnVhmMp

我仍然是HTML，CSS和JavaScript的新手，因此非常感谢我对代码的任何其他建议。谢谢你的时间！

Answer 1

查看小提琴的内容，问题与CSS的关联性较低，与HTML布局的关系更为密切。第一个问题是，当它们只是一个表时，你正在构建多个表。您的顶部“行”应该是包含所有内容的表的一部分，而不是单独的表。您的左列也是一个单独的表。将它们全部合并到一张表中，这将有很大帮助。

我讨厌将您的工作重定向到完全重写，因为您正在学习HTML和CSS，但您可能会发现实现“响应式”设计的一种非常有效的方法是使用帮助程序库。我建议考虑使用Bootstrap，尽管还有很多其他的。 Bootstrap添加了许多“辅助类”，这些类将需要付出一些努力才能实现您想要实现的目标。例如，考虑表格，我认为您可能正在寻找的是“特定于断点”的表格。

https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific

另一种选择是始终具有响应式表格，当屏幕调整大小时，您将获得水平滚动框架。

有很多选项可供选择，所以试一试。您可以在“资源”部分轻松地将Bootstrap库添加到JS Fiddle。

此外，您可以考虑将数据存储为JSON或数据库。随着这个项目的进展，您可能会发现Datatables是一个非常有用的JavaScript库。它允许您使用原始数据并更动态地构建表。

https://datatables.net/

Answer 2

不要使用自定义css来设置表格的样式，这可能需要一些时间让它在所有屏幕宽度上看起来都很好，请考虑使用bootstrap，它是html，css等的响应式框架。当你阅读时，它将是值得的bootstrap，因为它们提供响应表，可以根据监视器或其他设备的屏幕大小来帮助您。查看此链接，该链接将帮助您构建html结构并为工作流添加引导程序。您所要做的就是修改表格以满足您的需求。

参考文献：
https://getbootstrap.com/ https://getbootstrap.com/docs/4.0/content/tables/

使用不同客户端窗口大小调整HTML表大小

2 个答案: