html - 在小屏幕上查看 HTML 表格时强制 "zoom out"

Question

目前，在小屏幕上查看此表会产生水平滚动条。相反，我如何强制它在小屏幕上显示全宽和“缩小”？

我正在努力实现右手图片上发生的事情:https://css-tricks.com/wp-content/uploads/2011/04/doublesuck.png

我希望可以使用某种媒体查询 CSS。

.td {
  /* width: 100% !important; */
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  color: #2b2c37;
}

.tracking-provider {
  text-align: left;
  font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
  color: #737373;
  border: 1px solid #e4e4e4;
  padding: 12px;
}

.tracking-number {
  text-align: left;
  font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
  color: #737373;
  border: 1px solid #e4e4e4;
  padding: 12px;
}

.date-shipped {
  text-align: left;
  font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
  color: #737373;
  border: 1px solid #e4e4e4;
  padding: 12px;
}

.order-actions {
  text-align: left;
  font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
  color: #737373;
  border: 1px solid #e4e4e4;
  padding: 12px;
}

<table class="td" cellspacing="0" cellpadding="6" border="1">
  <thead>
    <tr>
      <th class="tracking-provider" scope="col">Provider</th>
      <th class="tracking-number" scope="col">Tracking Number</th>
      <th class="date-shipped" scope="col">Date</th>
      <th class="order-actions" scope="col">&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr class="tracking">
      <td class="tracking-provider">
        Startrack </td>
      <td class="tracking-number">
        99999999999999 </td>
      <td class="date-shipped">
        <time datetime="2017-07-30">July 30, 2017</time>
      </td>
      <td class="order-actions">
        <a href="http://google.com" target="_blank">Track</a>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

1) 修正你的设计

尽管您的请求没有任何问题；您链接到的图像确实声明

both equally suck

因为他们这样做。我总体建议 reworking how your data is laid out ;不坚持传统的多列表语法。

2) 弗兰肯斯坦 CSS 解决方案

无论如何；作为解决方案；你想使用两个规则:一个用于大屏幕，一个用于小屏幕。 “大屏幕”规则是默认规则，为了清楚起见，我在这里展示它；这是您已经知道的信息，只是对浏览器默认设置的一个调整。

table {
     display    : table;
     max-width  : 100%;
     box-sizing : border-box;
     border-collapse: collapse;
}

现在；用于小型设备的媒体查询；说小于 768px (这个数字非常武断；只需选择比您的表格列更适合的比例):

@media screen only and (max-width:765px){
    table {
        max-width  :100vw;  
        width      :100vw; 
        font-size  :<figure>vw;  
    }
}

如果 <table> 的所有 个子元素，上述规则将起作用按百分比或屏幕宽度或其他非绝对值缩放(即 <td> 宽度被声明为 % 而不是 px 等)。

字体大小为 opional bonus variable再次取决于您的表格大小以及您希望在屏幕上显示多少数据以及您希望这些数据的可读性。另请注意，字体大小可能需要 !important; 标记以覆盖表格中单元格或行的特定字体大小。

如果您热衷于缩放字体(根据您的示例图像)，我建议您查看 precise control responsive typography by Mike .

3) 使用 Vewport 元标记

Viewport Meta Tag将大大有助于您跨越这一障碍。

4) 不要缩放或变换:缩放

CSS zoom许多浏览器未实现规则。它不应该被使用。使用 transform:scale在某些浏览器 (Chrome) 中也能正常工作，但在其他浏览器 (Firefox) 中根本不起作用。