CSS表格在div高度之外增长

Question

大家早上好！

我正在尝试制作一个基于 % 大小的表格。宽度工作正常，但我在高度方面遇到了一些问题。当用户将屏幕大小调整到一定大小时，表格就会停止降低它的高度，在 div 之外增长。下面是一些印刷品：

正常尺寸

调整大小的屏幕

我已经尝试更改显示、溢出、位置，但均未成功。当涉及到一定大小时，桌子就停止降低它的高度。

表格和育儿div的css下方：

.tblMotivos {
    table-layout:fixed;
    border: 0 solid white;
    -moz-box-sizing: border-box;
    width: 100%!important;
    min-height: 100%!important;
}

.divFundoMotivos{
    padding: 0 !important;
    background-color: white;
    height:88%!important;
}

还有 HTML：

        <div class="col-sm-12 divFundoMotivos">
            <table class="tblMotivos" border="1" id="tblMotivos" style="table-layout:fixed;">
                <thead style="background-color:darkgray;">
                    <tr style="border-color:white;">
                        <td class="tdHeaderMotivos" style="width:44%;padding-left:1%;">Motivo</td>
                        <td class="tdHeaderMotivos" style="width:16%;">#</td>
                        <td class="tdHeaderMotivos" style="width:20%;">Meta</td>
                        <td class="tdHeaderMotivos" style="width:20%;">Perf.</td>
                    </tr>
                </thead>
                <tbody>
                    @if motivos.Count > 0 Then
                        @for each motivo As motivoRetencao In motivos
                            @<tr>
                                <td class="tdBodyMotivos" style="padding-left:2%;">@motivo.motivo</td>
                                <td class="tdBodyMotivos tdBodyMotivosValor">@motivo.qtde</td>
                                <td class="tdBodyMotivos tdBodyMotivosValor">@motivo.meta %</td>
                                <td class="tdBodyMotivos tdBodyMotivosValor fontWhite" style="@(If(motivo.performance >= motivo.meta, "background-color:green", If(motivo.performance >= ((motivo.meta * 85) / 100), "background-color:yellow;color:black!important", "background-color:red")))">@motivo.performance %</td>
                            </tr>
                        Next
                    End If
                </tbody>
             </table>
        </div>

提前致谢。最好的问候。

Answer 1

您可以尝试使文本具有响应性，这将为您提供更多空间。

或者您可以使用媒体查询来删除特定高度的单元格之间的边距。

Answer 2

我在过去也遇到过与 display: table; 与 height 属性混合的类似问题。大多数浏览器认为浏览器属性上的height 实际上是min-height。如果表格需要更高的高度，它会简单地接受它......并且min + max-height 不被 Firefox 考虑（但它们被 Chrome 考虑）。

您最好的选择是在表格内制作响应式内容，使用inline-block 或flexbox 代替表格，或者尝试使用一些javascript 来实现响应...

希望对您有所帮助。

可能对您有所帮助的指南：

弹性盒指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

css居中指南：https://css-tricks.com/centering-css-complete-guide/

参考资料：

min-height and table cells

来自：http://www.w3.org/TR/CSS21/visudet.html#propdef-max-height

在 CSS 2.1 中，'min-height' 和 'max-height' 对表格、内联表格、表格单元格、表格行和行组的影响是未定义的。

来自：http://www.w3.org/TR/CSS21/tables.html#height-layout

“table-row”元素框的高度是在用户代理获得该行中的所有单元格后计算的：它是该行计算的“高度”中的最大值，每个单元格的计算“高度”行和单元格所需的最小高度 (MIN)。 'table-row' 的 'auto' 的 'height' 值意味着用于布局的行高是 MIN。 MIN 取决于单元框高度和单元框对齐方式（很像行框高度的计算）。 CSS 2.1 未定义在使用百分比值指定高度时如何计算表格单元格和表格行的高度。 CSS 2.1 没有定义行组中“高度”的含义。

在 CSS 2.1 中，单元格框的高度是内容所需的最小高度。表格单元格的 'height' 属性可以影响行的高度（见上文），但不会增加单元格框的高度。

Answer 3

我同意使用媒体查询 这是 twitter bootstrap 使用的默认媒体查询 https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

实现该媒体，您需要根据屏幕大小调整一些属性，例如字体大小等以满足您的需要