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>
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)
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/
I have a table structure as below
<table width="100%">
<td width="18%"></td>
<td width="95%"></td>
</table>
The Actual table width is 100% but the child td's sum up to give 113%-Does this have any effect on the table layout??
I believe the answer is ENTIRELY dependent on the browser you are testing with. I'd strongly suggest not doing this if you want consistent results across multiple browsers and devices.
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