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
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.
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
I've had similar issues with css display: table; mixed with the height property also in the past. Most browser consider the height on browser property to be actually min-height. If the table require more height, it will simply take it... And min + max-height are not considered by Firefox (but they are by Chrome).
Your best bet would be either doing responsive content INSIDE the table, using inline-block or flexbox instead of table or try to use some javascript for responsiveness...
Hope it help.
Guides that might help you:
Guide for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Guide for centering in css: https://css-tricks.com/centering-css-complete-guide/
References:
min-height and table cells
from: http://www.w3.org/TR/CSS21/visudet.html#propdef-max-height
In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.
from: http://www.w3.org/TR/CSS21/tables.html#height-layout
The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's computed 'height', the computed 'height' of each cell in the row, and the minimum height (MIN) required by the cells. A 'height' value of 'auto' for a 'table-row' means the row height used for layout is MIN. MIN depends on cell box heights and cell box alignment (much like the calculation of a line box height). CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values. CSS 2.1 does not define the meaning of 'height' on row groups.
In CSS 2.1, the height of a cell box is the minimum height required by the content. The table cell's 'height' property can influence the height of the row (see above), but it does not increase the height of the cell box.
You could try making the text responsive, this would give you some more space.
or you could use a media query to remove the margins between the cells at certain heights.
Related
I have a table that I'd like to override the row height of, as the rows are just too tall. I tried setting a class on tr on my own css and setting the height value.
CSS: No seriously, that's all the css for this template. And html
tr.unitGridRow {
height: 20px;
}
<tbody>
{{#each unitInService}}
<tr class="unitGridRow">
<td>
<div class="chip" style="background: {{unitColorCode}}; color: {{unitTextColorCode}};">
{{callSign}}
</div>
</td>
<td>{{currentStatus}}</td>
<td>{{timeInStatus}}</td>
</tr>
{{/each}}
</tbody>
but the row height never changes. I'm using Meteor 1.5.0 and Materialize 0.98.2 currently.
Any help is greatly appreciated,
This might come too late, but may help for future googlers.
The row height is fixed because of the padding. Manually modify the padding in css, that should do the work. At least it worked for me.
The unit vh stands for 'viewport height', and the number represents a percentage of the viewport height. So 1vh means 1% of your window height. Thats very small, and a table row doesn't want to be smaller than the height of its content. Set this to 50vh and see what happens. Not sure what you are trying to achieve, but vh doesn't seem like the right unit for a row height. If the rows are too tall, there must be something inside them making them tall.
Ok, after digging in and messing with this a bit more, I found that the (column in the row) also had to be overridden for the height setting.
I'm trying to get a table with fixed-width tds and variable-width tds.
Im using the CSS calc() function, but somehow it seems like I can't use % in tables.
So that is what I have so far:
<table border="0" style="width:100%;border-collapse:collapse;">
<tr style="width:100%">
<td style="width:30px;">1</td> <!--Fixed width-->
<td style="width: calc( (100% - 230px) / 100 * 40);">Title</td> <!--Width should be 40% of the remaining space-->
<td style="width: calc( (100% - 230px) / 100 * 40);">Interpret</td> <!--Width should be 40% of the remaining space-->
<td style="width: calc( (100% - 230px) / 100 * 20);">Album</td> <!--Width should be 20% of the remaining space-->
<td style="width:80px;">Year</td><!--Fixed width-->
<td style="width:180px;">YouTube</td><!--Fixed width-->
</tr>
</table>
How I see it, it should work, but it isn't.
Does anybody know how to solve this? Or maybe has an other suggestion how I could reach my goal?
Tables have difficult rules about distributing the space of the columns because they distribute space dependent on the content of the cells by default. Calc (atm) just wont work with that.
What you can do however is to set the table-layout attribute for the table to force the child td elements to get the exact width you declared. For this to work you also need a width (100% works) on the table.
table{
table-layout:fixed; /* this keeps your columns with at the defined width */
width: 100%; /* a width must be specified */
display: table; /* required for table-layout to be used
(since this is the default value it is normally not necessary;
just included for completeness) */
}
and then use plain percentages on the remaining columns.
td.title, td.interpret{
width:40%;
}
td.album{
width:20%;
}
After using up the space for the fixed width columns, the remaining space is distributed between the columns with relative width.
For this to work you need the default display type display: table (as opposed to say, display: block). This however means you can no longer have a height (including min-height and max-height) for the table.
See your modified Example.
Calc is the general function.
-webkit-calc is for webkit.
Add those in according to the browser you're using.
Regardless, your -calc- function will be ignored. having 3 td's that will be 40% of the remaining width? Thats 120% in total. This is a table. The parent's width will always take precedence.
However, if you have the TD's in in 5%, it the total width will be smaller than that of the table, hence it will also be ignored.
Bottom line: don't use calc with table.
I have a div of width 60% and overflow-x set to scroll.
<div style="width: 60%; overflow-x: scroll">
</div>
Inside that, I have a table with 1 row and dynamic number of cells (th's) within that row.
<div style="width: 60%; overflow-x: scroll">
<table>
<thead>
<tr>
<th style="width: 20px;">
<input type="checkbox" />
</th>
<th style="width: 300px">Name</th>
<th style="width: 300px">Email</th>
#foreach (Group group in groups)
{
<th style="width: 150px">#group.Name</th>
}
</tr>
</thead>
</table>
</div>
When this is rendered, I'm having two problems
1) The table adjusts its width to the 100% of the div. What I want is the table to be much more wider than the div. That is why the div has "overflow-x: scroll", so that the table is scrollable horizontally.
2) The cells (th's) are not rendered with the widths I gave them
Note: The "#group.Name" inside the dynamically created th's should generally have less than the 150px that I gave to the th's.
How can I solve these two problems?
Try <th nowrap style="..."> to force cells to widen instead of wrapping.
As I can see You know widths of each column, so You know total table width. If total table width is 1000px, adding :
style="width:1000px"
to table tag should solve the problem. I've tested this approach in Chrome, and it works well.
The cause is that you are setting width to all TDs.
When table is rendered by browser, the engine compute the widths of each TDs to match Table width.
It will distribute the overflow/missing pixels to the Table columns, squeezing or stretching them. The distribution is based by columns width (by percentage), larger columns get more larger in absolute number of pixels.
If the table has columns that don't have width specified, this distribution falls only on them, ignoring columns with explicit width.
Surely, if table is CSS computed with width: auto or no width's set, the columns stay with their size and table width will be the sum of columns size (plus table borders, etc..)
You have 2 ways to fix your table:
set table CSS width to auto.
At least 1 TD must have no width - a pivot column.
Use one of them, or both..
Original question: Does HTML <table> have a default width?
Recently someone asked a question somewhere along these lines, and got me wondering.
Take this for example.
http://jsfiddle.net/rqmNY/1/
In this fiddle, if you were to check its width (I'm using inspect element from chrome), it shows 100px, working as intended.
Lets add a few more "td"s in, and we shall see that the "td:100px" css is being ignored.
http://jsfiddle.net/rqmNY/2/
As you can see, now it's 83px instead of 100px as originally intended.
But let's say, I move back to fewer TD's (7), and I add in a wider width to each TD element (500px), the result is that the width of the td gets stuck at 119px.
http://jsfiddle.net/rqmNY/6/
And finally, let's say I have a table of 2000px width, and td of 100px width, and many td elements.
http://jsfiddle.net/rqmNY/7/
Now the table width overrides the TD width, and expands the td's width to 222px.
Can anyone explain this behavior?
p.s. Note that in all cases, inspect element tool tells me that the width is always corresponding to the css, it's just the final result not showing correctly.
Have you tried adding display:inline-block to your TD CSS? That forces the browser to not ignore your TD width.
I highly believe the answer to this question is such:
The priority of widths that will affect the TD is
Table Width
Parent Element Width (and if none, Viewport)
Element(TD) Width.
Hence if the table width is set, the TD's will ALWAYS adjust to the width of the table. However, if the width is unset, the "main" width will be the true width of the viewport. Unless the CSS code states otherwise, this holds true. And only when the total width of the TD's is smaller than that of the viewport, the elemental width will be taken into account.
Edit
Table width will always override TD width.
Stated TD width will only be followed until it exceeds viewport width, and viewport width will be taken as priority.
Actually the table width depends on the cell width when you do not specify the table width. But when you specify the table width it will ignore the td width. Look at the following example:
<table>
<tr>
<td>Column 1</td>
</tr>
<tr>
<td>Column 2</td>
</tr>
</table>
If you use
td {
width:500px;
}
then the table width will be 1000px.
But if you use
table {
width:500px;
}
td {
width:500px;
}
it will ignore the <td> width and the table width will be 500px.
According to the w3 Docs Here It says "In the absence of any width specification, table width is determined by the user agent."
What I can think of it is td width is always dependent on the table width. If you specify it or not. If you have a table with width 500px and 2 TDs with width 200px each. Now after adding these 2 TDs in table there are 100px remaining to accommodate so 50px each are added to both the TDs overwriting the original width property. See this link http://jsfiddle.net/rqmNY/7/
Why are web browsers ignoring the max-width property in percents and apply the max-width property in px for table cells?
For example:
<td style="max-width:10%;word-wrap:break-word;">veryLongTextWithoutSpace</td>
will be ignored, and table cell content will not wrap.
But,
<td style="max-width=60px;word-wrap:break-word;">veryLongTextWithoutSpace</td>
will be applied and table cell content is wrapping.
UPD: More about my case and table-layout: fixed
table-layout: fixed with sets width to table header (th tags) it's real good solution.
But, unfortunately, my case is crazy.
The table generates by custom tag (uses jsp technics), and I can't set the style for the table header (th tags), but I can set the style for each row and column.
At result, table-layout: fixed sets all columns with same width.
Full Example: http://jsfiddle.net/h3cxc/1/ (without table-layout:fixed)
http://jsfiddle.net/h3cxc/ (with table-layout:fixed)
Any idea how to fix this issue (max-width in percents) ?
Your second example has a typo/error and can't possibly work since you are using = instead of : .
On to the question:
Add table-layout:fixed to your table.
With this (fast) algorithm, the horizontal layout of the table does
not depend on the contents of the
cells; it only depends on the table's
width, the width of the columns, and
borders or cell spacing.
http://www.w3.org/TR/CSS2/tables.html#propdef-table-layout
Check sample: http://jsfiddle.net/easwee/UuVq6/9/