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?
Related
Basically I have a <table> taking up the whole available width of the screen. Sometimes I might have many cells, thus providing a base width to each <col> is helpful, to make sure it won't truncate badly.
I also, no matter the case, have a checkbox as the first column. I always want this to have a 31px width (precisely 31px). I'm okay if the rest of the cells don't take their precise width, but something like a percentage of the available space, based on the specified width, something it seems to do internally right now.
Problem is, if the <table> takes the whole width of the screen (and i need it to take the whole width of the screen), and I happen to have a few coulmns (let's say 4 columns) all with a defined width, the checkbox column will be lengthier:
Here's the fiddle: http://jsfiddle.net/7wwp53aw/2/
I also included in the fiddle the desired table look.
You need to allow at least one of the columns to be free of width.
If they all have a width defined then it is used as a ratio of the whole table to use..
<colgroup>
<col style="width: 31px;">
<col>
<col style="width: 100px;">
<col style="width: 100px;">
</colgroup>
Or you can leave all but one, so that they get auto-width based on contents..
<colgroup>
<col style="width: 31px;">
<col>
<col>
<col>
</colgroup>
Demo at http://jsfiddle.net/gaby/7wwp53aw/8/
Since you gave the table a width (100%) there is no reason to give every cell a width. Leave the width for the cells where you don't care and it works:
http://jsfiddle.net/7wwp53aw/7/
<colgroup>
<col style="width: 31px;">
<col>
<col>
<col>
</colgroup>
I have created a table on my page through Wordpress.com (the free version). I do not have access to the css, but I can put a table on the page. However, even though I have set the column widths equally, they do not show up that way. The first column is wider than the other.
Am I using the code improperly? If so, how should it be written?
<table width="98%">
<col width="49">
<col width="49">
<tr>
<th>Bhakti Siddhanta</th>
<th>Note</th>
</tr>
<tr>
<td>The 10 Divisions of the Srimad Bhagavatam</td>
<td></td>
</tr>
</table>
98% refers to the width of the container the table is in. It is a dynamic size. Your table will size to 98% of whatever its sitting in, and the first column will be 49 pixels wide. The second column will be stuck with whatever is left.
Try col width = "50%" for both columns
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..
Example:
<table width="500">
<tr>
<td width="50">1</td>
<td width="100%">2</td>
<td width="100">3</td>
</tr>
</table>
If I'm not mistaken, if a width is given as a percentage, it's a percent of the total width of the parent element, not a percent of the remaining width, correct?
Okay, fine, so what happens when we mix percentages and pixel widths? In the example above, column 2 takes up as much space as it can, and squishes 1 and 2 against the sides but it does not hide them; it allows them enough room to display their contents, even if overflow:hidden is set.
If instead we change column 2 to 10%, again the percentage seems to take priority, however it still seems to respect the proportionality of 1 and 3 -- 3 is still twice as wide as 1, even if the exact widths aren't as specified.
So what if we want to set 2 of the columns, and let the 3rd column fill the remaining space? Easy! Just completely omit the value.
Fine, but what if we want to set one column to an explicit pixel width, and have the 2nd be twice the width of the 3rd to fill the remaining space? Is that even possible in HTML/CSS?
sample fiddle
This seems to work in Chrome, but not IE or Edge:
<table style="width: 500px;">
<tr style="display: flex;">
<td style="width: 50px;">1</td>
<td style="flex-grow: 2;">2</td>
<td style="flex-grow: 1;">3</td>
</tr>
</table>
However, with <div> it appears to work in Chrome and Edge:
<div style="width: 500px; display: flex;">
<div style="width: 50px;">1</div>
<div style="flex-grow: 2;">2</div>
<div style="flex-grow: 1;">3</div>
</div>
I haven't used flex much, but I believe the number after flex-grow is the amount of remaining space to be taken up by each element in a flex element.
Edit: Flexbox layout is currently in W3C Candidate Recommendation. You can read more about it here.