I have a table with the following column sizing set. The first two are fixed, and the last one is set to occupy remaining space. However only the first th is not respecting width attribute (if set in pixels). It shows up proper width if I set in percent. Seems strange to me because I couldn't find any styles conflicting with it either. I even tried adding a column before "User" column, in which case User gets proper space as specified and the new column tries to spread.
<table width="100%">
<thead>
<tr>
<th width="100">User</th>
<th width="150">Date</th>
<th width="">Note</th>
</tr>
</thead>
</table>
What could be the possible cause for this? Why does it work for percent and not pixels? I even tried giving table width in px instead of %.
because in html tag width attributes use px if you want to full width table. define the width of table in css
do you have any style in your css that defining the table tag globally?
<table width="100%" border="1px">
<thead>
<tr>
<th width="100px">User</th>
<th width="150px">Date</th>
<th>Note</th>
</tr>
</thead>
</table>
it works fine on the https://jsfiddle.net/mqwh0cpn/
Related
I would like to specify a percentage width for one column and let the rest be calculated as normal. I need one column to allow anything too long to scroll in the table cell.
If I set table-layout: fixed, the percentage width column is sized correctly and the scrolling happens as expected, but the rest of the columns are evenly spaced and look awful.
If I set table-layout: auto, the percentage width is ignored and the column in question grows to accommodate the content instead of cutting it off with a scrollbar.
Is there a way to force a percentage width on one column while allowing the others to be sized to their content?
edit--here's a pen that shows that the column width is only honored with table-layout: fixed:
https://codepen.io/jugglervr/pen/vYxNYEa
I dont know if I understand your question correctly but simply putting a fixed width on the column you want will force it to fit to its size.
<table>
<thead>
<tr>
<th style="width: 100px">Name</th>
<th>Age</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 100px">Sample Name</td>
<td>23</td>
<td>Web Developer</td>
</tr>
<tr>
<td style="width: 100px">Another Name</td>
<td>27</td>
<td>Jobless</td>
</tr>
</tbody>
</table>
I am a bit confused by your question. In the other answer, you wrote, you wanted it to overflow, but that is what it is doing. If possible, could you add a picture of what you actually want it to do? (Can't comment, as I am new to Stack Overflow)
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
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 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..
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>