css - 保持表格的纵横比

Question

我有一个代表坐标的表格。

如何让尺寸动态变化，使其始终适合父 div(宽度:100%)，就像图像一样？

现在我使用硬编码的@media 查询。 但必须有更好的方法。

.hitbox {
  width: 25%; /* of page */
}

@media (min-width: 702px) and (max-width: 800px) {
  .hitbox .tablewrapper {
    font-size: 9px;
  }
}
@media (min-width: 800px) and (max-width: 840px) {
  .hitbox .tablewrapper {
    font-size: 10px;
  }
}
@media (min-width: 840px) and (max-width: 915px) {
  .hitbox .tablewrapper {
    font-size: 11px;
  }
}

编辑:

如果表格需要变得更小，那么包含的文本是固定文本大小的问题。

JSFiddle
这很好用。
但是再小，它就不起作用了。
它应该使字体变小，或者至少切割每个单元格(而不是表格)。

编辑 2: 整个表格应该始终可见，阅读文本并不重要，重要的是查看它创建的图案(灰色或红色)。

编辑 3: 重要的是这里的颜色，而不是标签，所以切割表格并使其滚动不是这里的解决方案。要求它像热图一样始终完全可见。

Answer 1

使用 viewport-relative units为您的字体大小。

1 vw unit is equal to 1% of the the width of the initial containing block.

将它与父级 div(直到正文和 html)的适当宽度结合起来，它应该会给你想要的结果。然后字体大小将根据屏幕(视口(viewport))大小动态缩放。如果减小视口(viewport)大小，字体大小也会减小，反之亦然。

例如:

td {
    width: calc(100% / 12); padding: 2px;
    overflow: hidden; background: #bababa;
    font-size: 1.5vw; /* <---- the viewport relative font-size */
}

演示 fiddle 1:https://jsfiddle.net/abhitalks/ucoLcm50/9/

Demo Snippet 1(点击全屏查看效果):

* { box-sizing: border-box; padding: 0; margin: 0; }
html, body { width: 100%; }
div { background-color: red; width: 50%; min-width: 160px; }
table { width: 100%; font-family: monospace; }
td {
    width: calc(100% / 12); padding: 2px;
    overflow: hidden; background: #bababa;
    font-size: 1.5vw; /* <---- the viewport relative font-size */
}

<div>
    <table>
        <tr>
            <td>A1</td><td>A2</td><td>A3</td><td>A4</td>
            <td>A5</td><td>A6</td><td>A7</td><td>A8</td>
            <td>A9</td><td>A10</td><td>A11</td><td>A12</td>
        </tr>
        <tr>
            <td>B1</td><td>B2</td><td>B3</td><td>B4</td>
            <td>B5</td><td>B6</td><td>B7</td><td>B8</td>
            <td>B9</td><td>B10</td><td>B11</td><td>B12</td>
        </tr>    
    </table>
</div>

---

另一种(和更好的)解决方案是保持字体大小固定但溢出包含 div 基于 最小宽度。这将使表格数据保持可读性，并在空间受限时允许滚动表格。

例如:

div { 
    width: 50%; min-width: 180px; 
    overflow-y: hidden; overflow-x: auto;
}

演示 fiddle 2:https://jsfiddle.net/abhitalks/pu2yh0fc/1/

演示片段 2:

* { box-sizing: border-box; padding: 0; margin: 0; }
html, body { width: 100%; }
div { 
    background-color: red; width: 50%; min-width: 180px; 
    overflow-y: hidden; overflow-x: auto;
}
table { min-width: 100%; font-family: monospace; }
td {
    min-width: calc(100% / 12); padding: 2px;
    overflow: hidden; background: #bababa;
    font-size: 1em; 
}

<div>
    <table>
        <tr>
            <td>A1</td><td>A2</td><td>A3</td><td>A4</td>
            <td>A5</td><td>A6</td><td>A7</td><td>A8</td>
            <td>A9</td><td>A10</td><td>A11</td><td>A12</td>
        </tr>
        <tr>
            <td>B1</td><td>B2</td><td>B3</td><td>B4</td>
            <td>B5</td><td>B6</td><td>B7</td><td>B8</td>
            <td>B9</td><td>B10</td><td>B11</td><td>B12</td>
        </tr>    
    </table>
</div>