How to hide table tr elements dynamically?

How can I tell if the contents of a table are resizing the table? i.e. if the rows of the table fill the table, but do not expand it, I want to show the elements, otherwise, I want to show a VIEW button.

Here is the table:

<table class="cal_Day_Event">
    <tr>
        <td class="cal_Day_Event_Phone_Icon">
            <img src="Images\PhoneComm.png" alt="phone"/>
        </td>
        <td class="cal_Day_Event_Phone_Desc">
            <a href="http://www.google.com">Call James</a>
        </td>
    </tr>
    <tr>
        <td class="cal_Day_Event_Meeting_Icon">
            <img src="Images\Meeting.png" alt="phone"/>
        </td>
        <td class="cal_Day_Event_Meeting_Desc">
            <a href="http://www.google.com">Meet Peter</a>
        </td>
    </tr>
</table>

The 开发者_JAVA百科row elements will be added dynamically. So, there could be anywhere from 0 - 20 items, and the users browser size will determine how big the table can grow before the elements need to be hidden.

How do I do this? I presume using Javascript or jQuery, and then handling a table resize event?

EDIT: Think Google calendar.

Well mate, if got your question right, you want the max width of the table to be the browser width and if the table row is bigger then than you want to replace the text inside with a button that says "VIEW".

I played with it for a while and this is what i came up with:

Your table: (added some test data)

<table class="cal_Day_Event">
            <tr>
                <td class="cal_Day_Event_Phone_Icon"> 
                    <img src="http://upload.wikimedia.org/wikipedia/commons/8/89/Large_Stratocumulus.JPG" />
                </td>
                <td class="cal_Day_Event_Phone_Desc"> 
                    <a href="http://www.google.com">Call James</a>
                </td>
            </tr>
            <tr>
                <td class="cal_Day_Event_Meeting_Icon">
                    <p>
                     TEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEESSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSTIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIINNNNNNNNNNNNNNNG!
                    </p> 
                </td>
                <td class="cal_Day_Event_Meeting_Desc">
                   <a href="http://www.google.com">Meet Perewrewrter</a>
                </td>
            </tr>
  </table>

The jQuery (not very good at explaining but il try):

 $(function() {
     /* Il hide the whole table by default  
        to get rid of the blink effect 
        (try the script whitout this part and you will understand ) */ 

     $("table[class='cal_Day_Event']").hide();
 });

 $(window).load(function () {

     /* Large Images loads after domready. This will make 
        it difficault to get the width of the image before 
        its loaded. Therefore ill use $(window).load() this 
        will execute my script after the whole page and its 
        contents has been loaded  */

     $("table[class='cal_Day_Event']").show(); /* shows the table after everything is loaded */                   
     var win_width = parseInt($(window).width()); /* get browser width (INT) */ 

    $.each($("table[class='cal_Day_Event'] tr td"),function(i,e){    /* For each TD in table */
    var e_next_obj =  $(e).children().eq(0);  /* Grab object in TD */
    var e_width = parseInt(e_next_obj.width()); /* Grab width of object in TD (INT) */
        if(e_width > win_width) /* If obj widht is bigger than browser width  */
        {
         /* if true then: creates a button with an onclick event 
              Replace original object */
         var bttn_view = $('<input type="button">');
             bttn_view.attr('value','View');
             bttn_view.click(function(){ 
            /*do whatever on bttn "view" click  */                     
            if(confirm('the content is bigger than your browser width load. \n want to see it anyway?'))
            {
              $(e).html(e_next_obj)
            }
             });
         $(e).html(bttn_view)    
           }
     });
 }) ;

See it in action here: http://jsfiddle.net/4XV9q/1/

Hope its not to far away from what you are after.

Cheers