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)
Related
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/
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 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>
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?