保持表格的宽高比

Question

我有一张表示坐标的表格

我如何动态改变大小，所以它总是适合父div（宽度：100％），就像图像一样？

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

{{1}}

编辑

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

JSFiddle
这很好。
但小一点，它不起作用。
它应该使字体变小，或者至少切割单元格。

编辑2： 整个表格应该始终可见，阅读文本并不重要，但要看到它创建的模式（颜色为灰色或红色）。

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

请参阅：

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

Answer 2

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

  

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 */
}

演示小提琴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>

另一种（和更好的）解决方案是保持字体大小不变，但基于{{1}溢出包含div的内容}。这将保持表数据可读，并且在存在空间约束时允许可滚动表。

例如：

min-width

演示小提琴2：https://jsfiddle.net/abhitalks/pu2yh0fc/1/

Demo Snippet 2：

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

* { 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; 
}

Answer 3

如何让动态改变大小，所以它总是适合父div（宽度：100％），就像图像一样？：

请参阅Jonathans解决方案，而不是(1/12)我建议它应该是(100/no-of-columns[td's] )%。

应该使字体变小，或至少切割单元格：

在overflow: hidden; css中添加div's（以便隐藏[cut]单元格中的[cut]单元格）：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Fiddle

希望它有助于......