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

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 可能使这一点显而易见。但是，在这种情况下可以做什么？如果我“挤压”表格，内容将难以辨认。例如，如果我想在智能手机上拉出一张 table ，我该如何修改 table 使其可用？现在我有 5 列。有没有一种方法可以开始一个新行，比如在两列或三列之后，以便不必压缩内容？

这是基本思想；我希望我所说的要点是清楚的。感谢任何输入。

Answer 1

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

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

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

希望对您有所帮助。