<TD> cells are changing size when grids are populated [duplicate] - html

Question

A lot of people still use tables to layout controls, data etc. - one example of this is the popular jqGrid. However, there is some magic happening that I cant seem to fathom (its tables for crying out loud, how much magic could there possibly be?)
How is it possible to set a table's column width and have it obeyed like jqGrid does!? If I try to replicate this, even if I set every <td style='width: 20px'>, as soon as the content of one of those cells is greater than 20px, the cell expands!
Any ideas or insights?

Answer 1

You could try using the <col> tag manage table styling for all rows but you will need to set the table-layout:fixed style on the <table> or the tables css class and set the overflow style for the cells
http://www.w3schools.com/TAGS/tag_col.asp
<table class="fixed">
<col width="20px" />
<col width="30px" />
<col width="40px" />
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
and this be your CSS
table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

Answer 2

Now in HTML5/CSS3 we have better solution for the problem. In my opinion this purely CSS solution is recommended:
table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/
table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/
table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/
table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/
<table class="fixed">
<tr>
<td>Veryverylongtext</td>
<td>Actuallythistextismuchlongeeeeeer</td>
<td>We should use spaces tooooooooooooo</td>
</tr>
</table>
You need to set the table's width even in haunter's solution. Otherwise it doesn't work.
Also a new CSS3 feature that vsync suggested is: word-break:break-all;. This will break the words without spaces in them to multiple lines too. Just modify the code like this:
table.fixed { table-layout:fixed; width:90px; word-break:break-all;}
Final result

Answer 3

table td
{
table-layout:fixed;
width:20px;
overflow:hidden;
word-wrap:break-word;
}

Answer 4

I had one long table td cell, this forced the table to the edges of the browser and looked ugly. I just wanted that column to be fixed size only and break the words when it reaches the specified width.
So this worked well for me:
<td><div style='width: 150px;'>Text to break here</div></td>
You don't need to specify any kind of style to table, tr elements.
You may also use overflow:hidden; as suggested by other answers but it causes for the excess text to disappear.

Answer 5

for FULLSCREEN width table:
table width MUST be 100%
if need N colunms, then THs MUST be N+1
example for 3 columns:
table.fixed {
table-layout: fixed;
width: 100%;
}
table.fixed td {
overflow: hidden;
}
<table class="fixed">
<col width=20 />
<col width=20 />
<col width=20 />
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>FREE</th>
</tr>
<tr>
<td>text111111111</td>
<td>text222222222</td>
<td>text3333333</td>
</tr>
</table>

Answer 6

table {
table-layout:fixed; width:200px;
}
table tr {
height: 20px;
}
10x10

Answer 7

table
{
table-layout:fixed;
}
td,th
{
width:20px;
word-wrap:break-word;
}
:first-child ... :nth-child(1) or ...