0

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

这是一些代码...

（1）HTML：

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

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

这是我的CSS代码...

(1) CSS 为#results

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 列。有没有办法可以开始一个新行，比如在两三列之后，以便不必压缩内容？

这是基本思想；我希望我所说的关键是清楚的。任何输入表示赞赏。

4

1 回答 1

0

有很多方法可以在较小的屏幕上处理表格。很多网站所做的是将它们放在一个 div 中，并为 div 分配 100% 的宽度和溢出：自动；然后他们为表格本身设置了一个最小宽度，以便在不破坏表格的情况下保持数据的完整性。

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

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

希望有帮助。

于 2013-07-21T07:47:21.507 回答