CODEWITHSUNDEEP
htmlcsshtml-table
byCoder
byCoder

Reputation: 9184

Html css table width is growing up when td text is too long

Sorry for maybe many code, but why I set my table as fixed size, but when my content is too long it doesn't fit it's td width, but it is increasing table size from 810px to many many longer.... What's the problem? what is wrong?

<table cellpadding="0" cellspasing="0" class="sortable zebra tablesorter tablesorter-default" id="articles-table">
...

http://jsfiddle.net/FN5Sn/

Here as it looks like now(and mu be so):

enter image description here

and here is what it looks like when I change some column content (so table is not 810px and is increasing over visible area)

enter image description here

But i must set, that table is fixed size, only for example 3-rd column size is getting smaller if table is to long.... How to do this?

NOTE: second column must be nowrap.... all other could be auto width

Upvotes: 0

Views: 8893

Answers (1)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

You need to remove this from the offending TDs:

white-space:nowrap;

Here is how you can use a mouseover effect to reveal hidden text that does not fit in a TD:

HTML:

<table width="100" border="1">
   <tr>
       <td>
           <div class="long">123 456 790-1122-4455</div>
       </td>
            <td>
           Other Data
       </td>
    </tr>
</table>

CSS:

td {
  white-space:nowrap; 
  min-height:25px;
  position:relative;
  width:90px  
}

.long {
    overflow-x:hidden;
    width:90px;
}   

.long:hover {
   position:absolute;
   z-index:10; 
   top:0;
   left:0;
   width:200px;
   background-color:#c0c0c0;
   border:1px solid #000000; 
   overflow-x:visible 
}

Upvotes: 3

Related Questions