HTML表格溢出隱藏僅用於td

Question

我們知道的是表格和第一列的寬度總和。第3列和第4列必須適應內容，第2列必須使用剩​​餘的空格。這第二個欄必須設置隱藏溢出，使得只有一條線或線
線

也許小提琴更加清晰

http://jsfiddle.net/favio41/9z867/

<table> 
    <colgroup> 
     <col class="col1" /> 
     <col class="col2" /> 
     <col class="col3" /> 
     <col class="col4" /> 
    </colgroup> 
    <tbody> 
     <tr> 
      <td class="date"> 
       <span class="month monthAndYear">Feb</span> 
       <br/> 
       <span class="day ng-binding">21</span> 
      </td> 
      <td style="background-image: url(resources/img/categories/G0400.png);" class="category_icon cat_G0400"> 
       <span class="concepto ng-binding">This is a example of text</span> 
      </td> 
      <td> 
       <span data-tooltip="Internet, teléfono fijo" class="cat-label cat-tooltip onlyTitle"> 
        <span class="text ng-binding">Internet</span> 
        <span class="arrow"></span> 
       </span> 
      </td> 
      <td class="importe"> 
       <span class="importe_value ng-binding">-33,23</span> 
      </td> 
     </tr> 

     <tr> 
      <td class="date"> 
       <span class="month monthAndYear">Feb</span> 
       <br /> 
       <span class="day ng-binding">21</span> 
      </td> 
      <td style="background-image: url(resources/img/categories/G0400.png);" class="category_icon cat_G0400"> 
       <span class="concepto ng-binding">This is a example of text, but this is really big and we want to be hidden the last part because if is too big ...</span> 
       <br/> 
       <span class="descripcion ng-binding">This is a example of description text</span> 
      </td> 
      <td> 
       <span data-tooltip="Internet, teléfono fijo" class="cat-label cat-tooltip onlyTitle"> 
        <span class="text ng-binding">Internet</span> 
        <span class="arrow"></span> 
       </span> 
      </td> 
      <td class="importe"> 
       <span class="importe_value ng-binding">-33,23</span> 
      </td> 
     </tr> 
</tbody> 

Answer 1

放一個DIV在細胞你想要溢出。設置DIV的尺寸和溢出，而不是TD。