How do I force table to take some space for headers (vertical and horizontal) and make all other cells (<td>) equal size no matter what?
<table>
<tr>
<th></th><th...
</tr>
<tr>
<th></th><td...
</tr>
<tr...
</table>
JSFiddle here
Would like all grey squares to have same size... any way to do it via CSS?
For cell of equal size add this rule
table {
table-layout: fixed;
}
Further information on MDN
If you also need to reduce the height of your cells just remove height=100% from the table and set an height to the <th> elements
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 table with 3 columns
**********************************************************
* Name * Description * Actions *
**********************************************************
* John * Lorem ipsum bla bla etc eetc * B1 *
* * * B2 *
**********************************************************
What happens is that the last column wraps its content first, then the description column. I would like the Description column to wrap first instead.
I tried adding white-space: nowrap but then the Actions column never wraps.
How does the browser decide which column to wrap?
I want the column 3 to be the last to wrap. So until the Description column is fully wrapped it should show the buttons on a single line. When there is no more space the column can wrap.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css');
<table class="table">
<thead>
<tr>
<th>Entity</th>
<th>ID</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Customer</td>
<td>9004</td>
<td>null, asdjkajk, kkkjk, kjkk, kkk, 898989</td>
<td>
<button class="btn c-btn">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<button class="btn c-btn">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
</tbody>
</table>
Columns wrap their text in descending order in a table.
So you only need to fix the last column's width.
If you want it to wrap again in small screens, just add a media query (see CSS) to reset it's width to auto and give the columng it's priority to wrap.
table{
width:300px;
}
td{
border:1px solid black;
}
table>tr>td:last-child{
width:40px;
}
#media (max-width: 200px) {
table>tr>td:last-child{
width:auto;
}
}
<table>
<tr>
<td>Col1</td>
<td class="cc">Description</td>
<td>Actions</td>
</tr>
<tr>
<td>John</td>
<td class="cc">Lorem ipsum bla bla black test long text</td>
<td>BA AB</td>
</tr>
</table>
Give the first and last column a width. The center layout will then take all the remaining layout and wrap its contents if needed.
See the automatic table layout section in the spec:
Column widths are determined as follows:
Calculate the minimum content width (MCW) of each cell: the formatted content may span any number of lines but may not overflow
the cell box. If the specified 'width' (W) of the cell is greater
than MCW, W is the minimum cell width. A value of 'auto' means that
MCW is the minimum cell width.
Also, calculate the "maximum" cell width of each cell: formatting the content without breaking lines other than where explicit line
breaks occur.
For each column, determine a maximum and minimum column width from the cells that span only that column. The minimum is that required by
the cell with the largest minimum cell width (or the column
'width', whichever is larger). The maximum is that required by
the cell with the largest maximum cell width (or the column
'width', whichever is larger).
For each cell that spans more than one column, increase the minimum widths of the columns it spans so that together, they are at least as
wide as the cell. Do the same for the maximum widths. If possible,
widen all spanned columns by approximately the same amount.
For each column group element with a 'width' other than 'auto', increase the minimum widths of the columns it spans, so that together
they are at least as wide as the column group's 'width'.
This gives a maximum and minimum width for each column.
The caption width minimum (CAPMIN) is determined by calculating for
each caption the minimum caption outer width as the MCW of a
hypothetical table cell that contains the caption formatted as
"display: block". The greatest of the minimum caption outer widths is
CAPMIN.
Column and caption widths influence the final table width as follows:
If the 'table' or 'inline-table' element's 'width' property has a computed value (W) other than 'auto', the used width is the
greater of W, CAPMIN, and the minimum width required by all the
columns plus cell spacing or borders (MIN). If the used width is
greater than MIN, the extra width should be distributed over the
columns.
If the 'table' or 'inline-table' element has 'width: auto', the used width is the greater of the table's containing block width,
CAPMIN, and MIN. However, if either CAPMIN or the maximum width
required by the columns plus cell spacing or borders (MAX) is less
than that of the containing block, use max(MAX, CAPMIN).
Note it says
If the used width is greater than MIN, the extra width should be
distributed over the columns.
However, it doesn't specify how it should be distributed.
Moreover, the algorithm is non-normative:
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.
Therefore, the behavior is implementation-dependent.
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/
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>