Question

我在调整桌面以适应媒体屏幕尺寸时遇到困难。现在的布局通过媒体查询调整其内容。实际上，不需要滚动条。

这是一些代码......

（1）HTML：

<div id="results">
</div>

雅，这真的很简单。此标记实际上驻留在一些其他包含内容的div中。此特定div保存在发出请求时从服务器发送的内容。当纯文本是内容时它会正确响应，但是表格会引起问题。

这是我的CSS代码......

（1）#results

的CSS

div#results {
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
}

（2）表格的CSS：

table {
  font-family: 'PT Sans', Arial, sans-serif; 
  color: #666;
  font-size: 12px;
  text-shadow: 1px 1px 0px #fff;
  background: #eaebec;
  margin: 20px;
  border: #ccc 1px solid;
  width: 80%;
  margin: 0 auto;
}

table th {
  padding: 21px 25px 22px 25px;
  border-top: 1px solid #fafafa;
  border-bottom: 1px solid #e0e0e0;
  background: #ededed;
}

table th:first-child {
  text-align: left;
  padding-left:20px;
}

table tr {
  text-align: center;
  padding-left: 20px;
}

table td:first-child {
  text-align: left;
  padding-left: 20px;
  border-left: 0px;
}

table td {
  padding:8px;
  border-top: 1px solid #ffffff;
  border-bottom:1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  background: #fafafa;
}

table tr:hover td {
  background: #f2f2f2;
}

无论媒体屏幕大小如何，表格都保持不变。 CSS可能使这一点显而易见。但是，在这种情况下可以做些什么呢？如果我“挤压”桌子，内容将难以辨认。例如，如果我想在智能手机上拉出一张桌子，我该如何修改它以使其可用？现在我有5列。有没有办法可以开始一个新行，比如在两列或三列之后，为了不必压缩内容？

这是基本的想法;我希望我所说的关键是明确的。任何意见都表示赞赏。

Answer 1

有许多方法可以在较小的屏幕上处理表格。许多网站做的是将它们放在div中并将div的宽度分配为100％并溢出：auto;然后，他们为表本身设置了一个最小宽度，以便保持数据的完整性，而不会对表进行混淆。

当用户到达一个对于他们的屏幕来说太大的表时，所有用户都会滚动，但是因为它包含在100％宽度div中并且溢出，所以它不会破坏页面的流量。

这只是一种方法，而且是最容易标记的。

希望有所帮助。

如何调整表格大小以对应媒体屏幕大小？

1 个答案: