Html CSS表格在div高度之外增长

大家早上好

我在试着做一张桌子，尺寸是%的。宽度还可以，但我的身高有点问题。当te user将屏幕大小调整到一定大小时，表格将停止降低其高度，并在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>

莫蒂沃
#
元
性能。
@如果motivos.Count>0，则
@对于每个motivo，作为motivo中的motivoRetencao
@
@莫蒂沃，莫蒂沃
@运动
@motivo.meta%
@动力性能%
下一个
如果结束

---

提前谢谢。致以最诚挚的问候。

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

---

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

我在css

display:table

与

height

属性在过去也是混合使用的。大多数浏览器在浏览器属性上考虑<代码>高度> /代码>，实际上是代码>最小高度> /代码>。如果桌子需要更高的高度，它只需要它。。。Firefox不考虑

min+max height

（但Chrome会考虑）

您最好的选择是在表内执行响应性内容，使用

内联块

或

flexbox

而不是表，或者尝试使用一些javascript来实现响应性

希望能有所帮助

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

flexbox指南：

css中的居中指南：

参考文献：

发件人：

在CSS 2.1中，“最小高度”和“最大高度”对表、内联表、表单元格、表行和行组的影响未定义

发件人：

“表行”元素框的高度在用户代理拥有行中所有可用单元格后计算：它是行中计算的“高度”的最大值、行中每个单元格的计算“高度”以及单元格所需的最小高度（最小值）。“表格行”的“高度”值为“自动”，表示用于布局的行高度为最小值。最小值取决于单元格框高度和单元格框对齐方式（非常类似于行框高度的计算）。CSS 2.1没有定义当使用百分比值指定表格单元格和表格行的高度时，如何计算表格单元格和表格行的高度。CSS 2.1没有定义行组上“高度”的含义

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

---

我同意使用媒体查询 以下是twitter引导程序使用的默认媒体查询

---

在使用该媒体时，您需要根据屏幕大小调整一些属性，如字体大小等，以满足您的需要

能否提供可在浏览器中查看的html？感谢帮助！我将深入研究flexbox，它似乎是一个不错的选择。但是现在，根据屏幕大小动态调整字体大小就解决了我的问题。谢谢你的回复。我根据屏幕大小调整了字体大小，解决了这个问题！谢谢，谢谢你的回复。我根据屏幕大小调整了字体大小，解决了这个问题！谢谢