CSS HTML Forcing table column to specific size - html

Question

I have the following within a JSFiddle: http://jsfiddle.net/X37V7/
HTML
<caption>Table 1 Example</caption>
<table id="fx">
<tr>
<th class="a75">Values</th>
<td class="a25 rotate overflow he rr">1</td>
<td class="a25 rotate overflow he rr">1</td>
<td class="a25 rotate overflow he rr">1</td>
<td class="a25 rotate overflow he rr">1</td>
</tr>
<tr>
<th class="a75">Initial value</th>
<td class="a25">One</td>
<td class="a25">Two</td>
<td class="a25">Three</td>
<td class="a25">Four</td>
</tr>
</table>
<caption>Table 2 Example</caption>
<table id="fx2">
<tr>
<th class="a75">Values</th>
<td class="a25 rotate overflow he rr">Long Text Example</td>
<td class="a25 rotate overflow he rr">1</td>
<td class="a25 rotate overflow he rr">1</td>
<td class="a25 rotate overflow he rr">1</td>
</tr>
<tr>
<th class="a75">Initial value</th>
<td class="a25">One</td>
<td class="a25">Two</td>
<td class="a25">Three</td>
<td class="a25">Four</td>
</tr>
CSS
body {
width:750px;
}
table {
display:block;
border-collapse:collapse;
width:100%;
overflow:hidden;
border-style:solid;
border-width:1px;
}
tr,th,td {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
word-wrap:break-word;
border-style:solid;
border-width:1px;
}
th {
width:5%;
}
.over {
overflow:hidden;
}
.a24 {
width:10%;
}
.a75 {
width:60%;
}
.he {
height:130px;
}
.rotate {
-webkit-transform:rotate(270deg);
}
.rr {
height:-1px;
width:130px;
margin-left:-30px;
}
#fx,#fx2 {
table-layout:fixed;
overflow:hidden;
}
There are two table examples. Both are set to fixed width.
The first table shows correctly as it has text within the cells that are smaller than its dimensions.
The second table shows what happens when longer text is inserted - the column grows wider.
Is there a way of forcing the column/cell to stay the size it is set, regardless of its content?

Answer 1

You will be able to achieve this if you set a max-width value to the desired cells you want fixed.
Please note the fixed width must be in pixels so the cell knows when to cause overflow.
(However if your table has a fixed width this is not a problem).
.a25{max-width:75px;}
Either overflow / text-overflow or text-wrap must also be applied to designate what the text should do. This is already present in your example. (As below)
(Note .a25 is incorrectly .a24 in your demo)
CLICK FOR WORKING DEMO
FULL CSS (As per your demo)
body{width:750px}
table{
display:block;
border-width: 1px;
border-style: solid;
border-collapse: collapse;
width: 100%;
overflow: hidden;
}
#fx{
table-layout: fixed;
overflow: hidden;
}
#fx2{
table-layout: fixed;
}
tr, th, td{
border-width:1px;
border-style: solid;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
th{
width: 5%;
}
.over{overflow: hidden;}
.a25{width:10%;max-width:75px;}
.a75{width:60%}
.he{height:130px;}
.rotate{-webkit-transform:rotate(270deg);}
.rr{height:-1px;width:130px;margin-left:-30px;}
CLICK FOR CLEAN DEMO
CSS (CLEAN VERSION)
table{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
tr, th, td{
border:1px solid #888;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.w25{width:10%;max-width:75px;}
.w75{width:60%}
.h130{height:130px;}
This example is currently a fluid table with overflow.
To fixed cell size either replace max-width with width or replace table width with fixed value.

Answer 2

The problem is that you have set the white-space: nowrap; your stopping it from wrapping around the lines, change this to white-space: wrap;. Hope that helps.
Please view fiddle http://jsfiddle.net/X37V7/

Answer 3

Use Below CSS Code:
CSS:-
tr, th, td{
border-width:1px;
border-style: solid;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space:wrap;
}
table td.a25{
max-height:70px;
}

Answer 4

You can do this with CSS alone:
Only assign box class [as defined below css class] to the column you want to have fixed width.
.box {
-o-text-overflow: ellipsis; /* Opera */
text-overflow: ellipsis; /* IE, Safari (WebKit) */
overflow:hidden; /* don't show excess chars */
white-space:nowrap; /* force single line */
width: 300px; /* fixed width */
}
Hope this helped!