How can I clip the center column of text during a table resize but leave 2 side columns alone?

I have a table with three columns of text that I'm having trouble getting to resize properly. The middle column holds a lot of non-crucial text that should be clipped (with an ellipsis) when the page is resized, but the two edge columns hold text that cannot be clipped. None of the text should be wrapped. Here's some example HTML:

<table id="resize-table">
<thead>
    <tr>
        <th class="col-1">Column 1</th>
        <th class="col-2">Column 2</th>
        <th class="col-3">Column 3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="col-1">Unclippable text</td>
        <td class="col-2">Clippable text that is very long. Clippable text that is very long.</td>
        <td class="col-3">Unclippable text</td>
    </tr>
</tbody>

And here's the css that I'm using:

#resize-table{
    width:50%;
    border-collapse:collapse;
}
#resize-table th{
    padding:0.2em;
    border:1px solid black; 
}
#resize-table td{
    padding:0.2em;
    border:1px solid black;
    white-space:nowrap;
}
#resize-table .col-2{
    overflow: hidden;
    text-overflow: ellipsis;
}

When I resize the page the middle column is never clipped and the ellipsis is never shown. Instead, the table ce开发者_开发技巧lls just stops shrinking when they reach the width of the content. I've played around a lot with different width settings, but haven't gotten anything to work properly. I've also tried table-layout:fixed but that just results in all the columns being resized equally. Any ideas?

EDIT: I'm viewing this in Chrome, but a cross-browser solution would be ideal.

I can't say if this could be done exclusively in CSS but if you would consider some jQuery you might be able to achieve something like it. Consider the following.

 $(window).resize(function() {
  //if the table gets less that 300 say
  if ($("#resize-table").width() < 300) {
      //class small added so we do not repeat the operation unnecessarily
      if (!$(".col-2").hasClass("small")) {
        $(".col-2").each(function(){
            //put the content in a hidden div for later and only display the ellipses
            $(this).html("..." + "<div class='content' style='display:none'>" + $(this).html() + "</div>").addClass("small");
        });           
    }
} else {
    //else the table is large enough so
    if ($(".col-2").hasClass("small")) {
        $(".col-2").each(function() {
            //copy the td content back out of the hidden div
            $(this).html($(this).find(".content").html()).removeClass("small");
        });
    }
 }
});

Now, I haven't tried this in any rigorous way but it does the job. So its a rudimentary demonstration for feasibility.