I need a table with fixed column widths in px on my Bootstrap 3 project. Every <th> in my table <table id="items" class="table table-striped table-condensed"> has style=##px but its not assigning it. I've tried adding style="width:auto; overflow: scroll;" to the table but it does't work. Also tried removig every class on my table but colums wont grow.
Please help!
You could specify a <colgroup> section:
<table>
<colgroup>
<col span="1">
<col span="1">
</colgroup>
...
</table>
... and then set the width of your columns in CSS:
col {
width:200px;
}
If you are using the bootstrap .table class on the table element, you will also need to set the width of your table to auto.
See this jsfiddle.
Bootstrap 3 applies a width: 100% to the <table class="table">. In order to honor this, the browser will stretch cells to fill the remaining space. In Chrome 35 (I haven't tested in anything else), rules seem to be:
If some columns are fixed, but not all, then the fixed column widths are honored, and the remaining width of the table is split between the remaining columns that have no specified width.
If all <col> or <colgroups> have a specified (fixed) width, the browser will attempt to treat the widths like a percentage proportional to the width of the table. So if a two col's in a table have 100px, and 200px widths respectively, they may get 33% and 66% of the width respectively. This is not always the case the case though. The rules for this behavior seem to be quite complex and are probably browser-specific.
See this fiddle for a few examples and some experimentation.
http://jsfiddle.net/bzuillsmith/Nuhxj/129/
The solution finally was to remove 'table' class from the <table>. That way you can specify de width on <th> by css or directly on its width attribute. With the table class the width of the column can't be set even specifying a <colgroup> like a suggested answer.
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..
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 this table, and I want to give a width to a th element, but it doesn't work..
<th style="width: 400px">
Room type
</th>
Any help?
It does work, it's just that there's no room for the th to get 300px width, use min-width instead
Demo
Another Demo
use min-width instead of width
your table is too short to give width to the th..
delete some columns or just enlarge your table width.
like:
<table width="2000px">
Use min-width, display: inline-block; or display: block;.
I think the first is the best...
Due to your table being wide the width tag is not sufficient, use min-width instead.
<th style="min-width: 300px;" />
I would also recommend using colgroups if you are planning on setting a number of different widths in your headers - makes it easier to maintain and keeps it in one place.
I have an HTML table with 8 columns and multiple rows. The contents of each cell is generated dynamically and it is hard to predict the width of any column. I set table width=100% as I would like the table to take up the entire width of the div. I would like columns 2 through 8 to stay the same as width as if I did not set a table width. Then I would like for the first column to expand its width so that the table width becomes 100%. Is this possible?
Set a width on the table and on all the other columns; the remaining column will take up all the slack.
The trick is to use table-layout: fixed style so that the auto-layout guessing algorithm (and IE's particularly poor interpretation of it) doesn't step in and mess it up when there are larger than expected amounts of content in one column.
In fixed layout mode, the first row of cells or <col> elements sets the width; further rows do not affect widths. This makes rendering faster; you should used fixed layout for every table you can.
<table>
<col class="name" /><col class="data" /><col class="data" /><col class="data" />
<col class="data" /><col class="data" /><col class="data" /><col class="data" />
<tr>
<td>tiddle om pom pom</td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
</table>
table { width: 100%; table-layout: fixed; }
col.data { width: 2em; }
<div>
<table width="100%">
<tr>
<td width="100%"></td> <- this is col 1
<td></td><td></td><td></td><td></td><td></td><td></td><td></td> <- cols 2-8
</tr>
</table>
</div>
by setting the first cell to 100%, it will force that cell to try to be as wide as possible, while still respecting the widths of the rest of the cells. If cells 2-8 contains text, you can add so the text inside those cells do not get wrapped due to the first cell's attempt to be 100% width.
Set explicit widths for 2 - 8 and Cell 1 will determine its own width with the remaining space. You could also set no-wrap for the whitespace in the first cell too so the contents don't wrap, but force the cell to grow when necessary.
I think your question is not complete, because read literally, the answer is don't set any column widths at all. Every column will take as much space as it will, and they will somehow distribute it amongst each other.
Can you clarify what you would like to achieve?