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.
Related
I'm trying to create a table e.g. 8 number of columns. It works fine on the desktop screen. However, when trying on a smaller screen or trying to reduce the size of the browser, tds get divided equally and content gets squeezed.
I want to have the min-width of the td to be say 200px. How can we achieve this?
I tried
table-layout: fixed
td { min-width:200px;
}
Apparently, min-width on td does not work.
I also tried putting <td><div style:"min-width:200px"></div></td>
However, this does not work. td's border and the content in the divgets out of placed when doing so.
Is there any idea?
I can use bootstrap 3 as well if that solves the issue.
Thanks.
table-layout: fixed , this attribute (fixed) affects min-width. When I set it to automatic or inherit, and add the style min-width:200px, the td's width will not change when the width of browser's window is shrinked.
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 would like to have an HTML element, such as a table with a min and max width; I thought I would be able to use the following two attributes in CSS:
min-width
max-width
I want my table to have a minimum width of 1000px and a maximum width of 1230px; basically I want it to grow based on whats in the table elements TD. So,
min-width: 1000px;
max-width: 1230px;
Will this work? It doesn't seem to work for me as I want so I know I don't understand something; basically my table is always 1000px and it won't grow even if I try and force the size of a TD by giving it a large width. Table basically starts like this,
<table style="min-width: 1000px;max-width: 1230px;">...
You need to add width:100% so the table tries to grow to fit its container, but is constrained by its max-width.
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.
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..