CSS省略号时宽度设置为百分比不工作

Question

我有以下的DOM结构：

JSFiddle demo

<table class="tbl"> 
     <tr> 
      <th> 
       <td> 
        <div> 
         <span> 
          A lot of text in hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
         </span> 
        </div> 
       </td> 
       <td> 
        <div> 
         <span> 
          A lot of text in hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
         </span> 
        </div> 
       </td> 
      </th> 
     </tr> 
    </table> 

    table.tbl{ 
     background-color: #FFF; 
     border: 1px solid #000; 
     border-collapse: separate; 
     border-radius: 5px; 
     float: left; 
     margin: 10px 0; 
     width: 100%; 
    } 

    table.tbl tr { 
     font-weight: 400; 
     text-align: left; 
    } 

    table.tbl th { 
     color: #FFF; 
     font-weight: 400; 
     padding: 6px; 
     text-align: left; 
    } 

    table.tbl td { 
     padding: 10px 8px; 
    } 

    table.tbl div { 
     max-width: 100%; 
     display: inline-flex; 
    } 

    table.tbl span { 
     width: 100%; 
     white-space: nowrap; 
     overflow: hidden; 
     text-overflow: ellipsis; 
    } 

这表位于我的网页的右侧，但如果有大量文本在一个或两个span标签中，表格扩展从我的页面延伸。

我必须将表格保存为width: 100%，因为它需要填充页面右侧的所有可用空间。

我可以向span标签添加CSS省略号但将表的总宽度保持在width: 100%？

这似乎并没有为我工作，任何建议或意见将不胜感激。

Answer 1

你可以尝试他的一个：

table.tbl{ 
      background-color: #FFF; 
      border: 1px solid #000; 
      border-collapse: separate; 
      border-radius: 5px; 
      float: left; 
      margin: 10px 0; 
      width: 100%; 
      table-layout: fixed; 
     } 

     table.tbl tr { 
      font-weight: 400; 
      text-align: left; 
     } 

     table.tbl th { 
      color: #FFF; 
      font-weight: 400; 
      padding: 6px; 
      text-align: left; 
     } 

     table.tbl td { 
      padding: 10px 8px; 
     } 

     table.tbl div { 
      max-width: 100%; 
      display: inline-flex; 
     } 

     table.tbl span { 
      width: 100%; 
      white-space: nowrap; 
      overflow: hidden; 
      text-overflow: ellipsis; 
     } 

DEMO HERE