保持表格的纵横比

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： 这里重要的是颜色，而不是标签，因此裁剪表格并使其滚动不是解决方案。就像热图一样，它必须始终完全可见。

- luckydonald

---

创建表格作为svg图像是一个想法，但它似乎太复杂了，我不确定它是否像普通图像一样缩放。 - luckydonald

添加滚动条（水平），以及向左或向右滚动的按钮。对于字体，请使用vw / vh。 - muzazu

@MuhammadZaid 你能详细说明一下吗？你是指用Javascript吗？ - luckydonald

在vw单位中设置宽度和高度是有效的。 - Petr L.

Answer 1

使用视口相对单位设置字体大小。

1 vw单位等于初始包含块宽度的1%。

结合父级div（直到body和html）的适当宽度，就可以得到所需的结果。字体大小将根据屏幕（视口）大小动态缩放。如果缩小视口大小，则字体大小将减小，反之亦然。

例如：

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/

演示片段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>

- Abhitalks

---

因为我主要需要看到颜色模式，而标签并不是很重要，所以你的第一个解决方案非常好地解决了这个问题。 - luckydonald

Answer 2

将表格设置为宽度：100％，并将表格中的TD设置为1/12宽度（8.3％），然后TD应相对于表格调整大小。

table{
    width: 100%;
}
td {
    width:8.3%;
    overflow: hidden;
    background: #bababa;
}

<div>
<table>
    <tr>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
    </tr>
    <tr>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
    </tr>    
</table>
</div>

请看：

https://jsfiddle.net/ucoLcm50/1/

- Jonathan

---

如果表格需要变得更小，而其中的文本大小是固定的，则会出现问题。（请参见更新的问题，并感谢您提供的Fiddle） - luckydonald

将max-width设置为0px似乎在Chrome中有效（尚未在其他浏览器中测试。请参见：https://jsfiddle.net/ucoLcm50/10/）。 - Jonathan

Answer 3

如何使大小动态变化，以便始终适合父级div（宽度：100％），就像图像一样？

请参见乔纳森的解决方案，建议使用(100 /列数[td's] )％而不是(1/12)。

应该使字体更小，或者至少削减单元格：

在您的div's css中添加overflow: hidden;（这样它将隐藏[削减]超出该div的单元格）：

div {
    background-color: red;
    width: 50%;
    overflow:hidden;
}
table{
    width:100%;
}
td {
    width:8.3%;
    overflow: hidden;
    background: #bababa;
}

<div>
<table>
    <tr>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
        <td>A1</td>
    </tr>
    <tr>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
        <td>B1</td>
    </tr>    
</table>
</div>

Fiddle

希望能有所帮助。

- Vedant Terkar