I have a table structure as below
<table width="100%">
<td width="18%"></td>
<td width="95%"></td>
</table>
The Actual table width is 100% but the child td's sum up to give 113%-Does this have any effect on the table layout??
I believe the answer is ENTIRELY dependent on the browser you are testing with. I'd strongly suggest not doing this if you want consistent results across multiple browsers and devices.
Related
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.
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..
This isn't really a problem as such, but I would like to know what's going on so I can understand it. I'm currently coding a new website which has required me to use a single table in the footer of the design. (I don't often use them, but this table just makes life a lot easier for this project.)
I am using a CSS class for the tables td with the only element being width:%; but for some reason I just can't understand, increasing the % from 10% to 20% actually makes the td's smaller in width. totally backwards.
I'm really stumped by this one, can anyone explain this?
HTML:
<div class="footertable">
<table border="2">
<tbody>
<tr>
<td valign="top" class="footer">
<div class="footerheading">SHOPPING</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">CUSTOMER SERVICE</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">PAYMENT OPTIONS</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">SOCIAL</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">ORDER</div>
</td>
</tr>
</tbody>
</table>
</div>
CSS:
.footertable { margin:auto; max-width:1080px;}
td.footer {width:10%;}
Notes:
The strange behavior happens for percentages lower than 24: from 15 to 23 the total width decreases, and from 23 to 24 it suddenly expands. For percentages higher than 24, you have normal behavior.
It doen't matter if you specify max-width or just width for the table
The problem is reproduceable in chrome, firefox, opera and IE9
jsFiddle here: http://jsfiddle.net/BPygA/
Table layout has its fans and haters, but one thing is for sure, it's an advanced maneuver. It's like a combination of forces, some weaker, some stronger, that ultimately determine your column widths. And there's a lot of input variables:
table-layout:fixed or not
Table has a specific width (in pixels or percent or not at all)
Do all columns have widths?
Is there a colgroup element in the table?
How much space is available for the table?
Do any cells have non-breakable content?
It's kind of a nightmare for the inexperienced.
In your particular situation you table has no specific width, meaning it'll be the sum of the widths of the columns. But the columns are sized in percentages, which would be percentages of the total table width. You can see this is a chicken-and-egg problem.
Also using percentages that don't add up to 100% is kind of undefined.
I'd take a step back and think about what you're trying to achieve exactly.
I can see the behavior switching between 10 and 20% width on the table cells.
Adding a width to the table itself (not the containing DIV) changes the behavior:
http://jsfiddle.net/BPygA/2/
Without a width on the table itself, the browser is making a best guess on how to display the cells based on their content. I'm not sure why it chooses a smaller width when the percentage is set to a larger number, but it's a non-deterministic calculation so the browser is free to do what it wants (see spec below).
In other words, without a width on the table you are telling the browser that each cell is 10% of a variable value that it is free to determine.
Another consideration may be that the table has 5 cells. Setting each one to 10% results in a total width of only 50%. Once again, the browser has to guess about the total width, but also has to determine what to do with the remaining 50% that is not accounted for.
As #Jacob pointed out the W3 defines recommendations (but only recommendations) to guide user agents in how to render tables.
This algorithm reflects the behavior of several popular HTML user
agents at the writing of this specification. UAs are not required to
implement this algorithm to determine the table layout in the case
that 'table-layout' is 'auto'; they can use any other algorithm even
if it results in different behavior.
The UA should try to use the requested percentage, but it may not always be possible.
A percentage value for a column width is relative to the table width.
If the table has 'width: auto', a percentage represents a constraint
on the column's width, which a UA should try to satisfy. (Obviously,
this is not always possible: if the column's width is '110%', the
constraint cannot be satisfied.)
http://w3.org/TR/CSS2/tables.html#propdef-table-layout
I would be curious as to a better explanation.
I have a table:
<table border="1px">
<tr>
<td style="width:200px">td1</td>
<td style="width:3200px">td2</td>
</tr>
</table>
and the browser fits it in the current window, in it's width proportions I think.
I would like the table to have it's real width, so that the window scrolls if necessary.
I don't know why the table behaves this way - upvotes from me for anybody who can explain in depth why the width on the tds gets overridden.
The easiest way around it would be giving the table element the composite width:
<table style="width: 3400px">
alternatively, putting a 3200px wide element into the td seems to work as well:
<td style="width:3200px"><div style="width: 3200px"> </div></td>
TD widths are always interpreted as percentages in relation to the width of the entire table when the table does not overflow anymore. Tables do not overflow past the horizontal edge unless they have an explicit width set.
<table border="1px" width="3400px"> <!--The page will overflow if the table width is greater -->
<tr>
<td style="width:200px">td1</td>
<td>td2</td> <!--The width of this cell will be whatever 3400-200 is. (i.e. 3200) -->
</tr>
</table>
We have a application of huge amount of data which is to be converted into HTML tables via Velocity templates.Question1: One area to be focused is the impact of providing exact sizing for the page elements as opposed to the browser resizing tables height and width
want to understand how much time is spent by the browser doing that
as opposed to creating a page that exactly sized for 1024 x 768, for example
Question2 :The page actually loading is a chart with lots of graphs and cells with in a grid which depicts 15 min interval of day which is micro version of the data. So the grid cells were constructed to put '*' value inside the grid. Is there any better way of doing this.
Question 1:
If your document is data intensive as you portray it to be, it would be beneficial to allow for the flow [auto-resizing] of your display markup [layers/tables] to take into consideration those with larger display areas [Above: 1024x768]. You might want to consider defining the smallest possible width/height through layers+css or placeholder images to keep from over-wrapping by those with display areas that are less than the intended 1024x768.
Example:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="25%"><div style="width:200px;height:1px;overflow:hidden;clip:rect(0px 200px 1px 0px);" title="Column Space Saver"></div></td>
<td width="75%"><div style="width:400px;height:1px;overflow:hidden;clip:rect(0px 400px 1px 0px);" title="Body Space Saver"></div></td>
</tr>
<tr>
<td width="25%" valign="top" style="background:#EB0000">Will be 200px or 25%, whichever is greater, and always adhere to those parameters even if my screen size is smaller than combined 600px [hence column is 200px body is 400px].</td>
<td width="75%" valign="top">Will be 400px or 75%, whichever is greater, and always adhere to those parameters even if my screen size is smaller than combined 600px [hence column is 200px body is 400px].</td>
</tr>
</table>