CODEWITHSUNDEEP
htmlcss
Homer_J
Homer_J

Reputation: 3323

CSS HTML Forcing table column to specific size

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?

Upvotes: 2

Views: 1569

Answers (4)

Nirav Mehta
Nirav Mehta

Reputation: 7063

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!

Upvotes: 0

DreamTeK
DreamTeK

Reputation: 34177

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.

Upvotes: 1

Code Nitro
Code Nitro

Reputation: 29

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;
}

Upvotes: 0

Harry
Harry

Reputation: 3195

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/

Upvotes: 0

Related Questions