Abner Abner - 26 days ago 9
CSS Question

CSS Table growing outside div height

Good morning everybody!

I'm trying to make a table with size based on %. The width works fine, but i'm having some problems with height. When te user resizes the screen to a certain size the table just stop decreasing it's height, growing outside the div. Below some prints:

Normal size

normal screen

Resized screen

resized screen

I've already tried to change the display, the overflow, the position, all without success. When it comes to a certain size the table just stop decreasing it's height.

Below the css to the table and the parenting div:

.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;
}


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


Thanks in advance. Best regards.

Answer

i agree with using media query here is the default media query used by twitter bootstrap https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

implementing that media, you will need to adjust some properties such as font size, etc based on screen size to fit your need

Comments