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