如何使一個動態的表格單元格使用溢出：隱藏

Question

我想用溢出：隱藏在動態表格，只應作爲寬必要的是：

<table> 
<tr><td>Should_not_overflow</td></tr> 
<tr><td style="overflow: hidden;">This text should overflow please</td></tr> 
</table> 

我知道，它與一個固定的表佈局，但我需要一個動態表。

我也知道它可以使用固定寬度和嵌套的<div>，但是我需要一個動態的表格佈局。

Answer 1

.table-wrapper { 
 
    font-size:12px; 
 
    position: relative; 
 
    width: 50%; 
 
    height: 275px; 
 
    border: 1px solid #333; 
 
    padding: 50px 0 0; 
 
    margin: 10px auto; 
 
} 
 
.header-bg { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    height: 50px; 
 
    background-color: #03A9F4; 
 
} 
 
.table-container { 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    height: 100%; 
 
} 
 
table { 
 
    width: 100%; 
 
    background-color: #FFF; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 
tr { 
 
    &:nth-child(even) { 
 
     background-color: #F2F2F2; 
 
    } 
 
    
 
    th { 
 
     text-align: left; 
 
     padding: 0 5px; 
 
     
 
     .th-extra { 
 
      width: 100%; 
 

 
      .th-extra__inner { 
 
       position: absolute; 
 
       top: 0; 
 
       color: #000; 
 
       line-height: 50px; 
 
       text-align: left; 
 
       border-left: 1px solid #333; 
 
       padding: 0 0 0 5px; 
 
       margin: 0 0 0 -5px; 
 
      } 
 
     } 
 
     
 
     &:first-child { 
 
      .th-extra__inner { 
 
       border: none; 
 
      } 
 
     } 
 
    } 
 
} 
 
td { 
 
    line-height: 42px; 
 
    text-align: left; 
 
    padding: 0 5px; 
 
    
 
    & + td { 
 
     border-left: 1px solid #333; 
 
    } 
 
}

<div class="table-wrapper"> 
 
    <div class="header-bg"></div> 
 
    <div class="table-container"> 
 
     <table cellspacing="0"> 
 
      <thead> 
 
       <tr> 
 
        <th> 
 
         <div class="th-extra"> 
 
          <div class="th-extra__inner">First</div> 
 
         </div> 
 
        </th> 
 
        <th> 
 
         <div class="th-extra"> 
 
          <div class="th-extra__inner">Second</div> 
 
         </div> 
 
        </th> 
 
        <th> 
 
         <div class="th-extra"> 
 
          <div class="th-extra__inner">Third</div> 
 
         </div> 
 
        </th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
        <td>Column</td> 
 
        <td>Column</td> 
 
        <td>Column</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Column</td> 
 
        <td>Column with longer content</td> 
 
        <td>Column</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Column</td> 
 
        <td>Column</td> 
 
        <td>Column</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Column</td> 
 
        <td>Column</td> 
 
        <td>Column</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Column</td> 
 
        <td>Column</td> 
 
        <td>Column</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Column</td> 
 
        <td>Column</td> 
 
        <td>Column</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Column</td> 
 
        <td>Column</td> 
 
        <td>Column</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Column</td> 
 
        <td>Column</td> 
 
        <td>Column</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Column</td> 
 
        <td>Column</td> 
 
        <td>Column</td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</div>