CSS HTML Forcing table column to specific size

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?

Your css has a class of `a24` but your table markup is using a class of `a25`. — beercodebeer, Jun 25 '14 at 15:47
The problem is that you have `white-space: nowrap`, which prevents text from wrapping onto 2 of more lines. By design, table cells will always expand their height and width to display their content. — Marc Audet, Jun 25 '14 at 15:51
The non-wrapping text is a minor problem. In your example, you are rotating the label/th fields to place them vertically, and then you have some issue with the table cells not shrinking to match the smaller width after rotation. There is more to this problem then first meets the eye! — Marc Audet, Jun 25 '14 at 16:06
Apologies for the a24 error, rectified but doesn't resolve the problem. — Homer_J, Jun 25 '14 at 16:53
@MarcAudet - yes, it certainly is causing me an issue. Irrespective of the rotation, I'm not convinced it is possible to actually enforce a cell or column to keep its size regardless of its contents. — Homer_J, Jun 25 '14 at 18:51

DreamTeK · Accepted Answer · 2014-06-26T08:45:35.717

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.

score 0 · Answer 2 · answered Jun 25 '14 at 15:55

0

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/

answered Jun 25 '14 at 15:55

Harry

3,031
7
42
67

also as pointed out by @beercodebeer, you are using a25 in your HTML, change the css to .a25. – Harry Jun 25 '14 at 15:57
cheers but as already mentioned in another suggestion, whilst this helps it does not resolve the issue of preserving the width of the cell/ column. – Homer_J Jun 25 '14 at 18:50
this might be of help http://stackoverflow.com/questions/4185814/fixed-table-cell-width – Harry Jun 26 '14 at 08:05

Code Nitro · Answer 3 · 2014-06-26T04:29:25.527

0

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

edited Jun 26 '14 at 04:29

answered Jun 25 '14 at 17:28

Code Nitro

29
4

Thanks, although it helps, the columns are still not equally spaced. If you 'Inspect' it - you will see that the column with the 'Long Text' in is 84px wide whilst the others are 70px. I'm looking for a solution that preserves the size of the cell or column regardless of its contents. – Homer_J Jun 25 '14 at 18:50

score 0 · Answer 4 · answered Sep 04 '14 at 10:49

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!

CSS HTML Forcing table column to specific size

4 Answers4

CLICK FOR WORKING DEMO

CLICK FOR CLEAN DEMO