在表中使用省略號

我有一個表使用省略號，但我堅持與衝突的爭論。這個場景是我有一個tr標籤和2個td的表。我需要第一個td是文本的寬度（border-collapse：collapse），但是，我需要表格的寬度爲100％，所以在第二個td中我可以使用省略號。我還沒有找到一種方法來將第一個td邊界合併，並將第二個用作省略號。在表中使用省略號

http://jsfiddle.net/epywtvjf/2/

<table> 
    <tr> 
     <td>This is the first div. 
     </td> 
     <td>This is the second div. This is the second div.This is the second div. This is the second div. This is the second div. 
     </td> 
     </tr> 
     <tr> 
     <td>This is the first div. 
     </td> 
     <td>This is the second div. This is the second div.This is the second div. This is the second div. This is the second div. 
     </td> 
     </tr> 
     <tr> 
     <td>This is the first div. 
     </td> 
     <td>This is the second div. This is the second div.This is the second div. This is the second div. This is the second div. 
     </td> 
     </tr> 
    </table> 

table{ 
    table-layout: fixed; 
    width: 100%; 
    border-collapse: collapse; 
} 

table td{ 
    white-space: nowrap; 
    border: none; 
    line-height:unset; 
    padding: 0px; 
    text-align: left; 
}

來源

2017-06-14 Keith

所以，你要在第一列寬但它需要的，以適應其文本，然後第二列只得到推過，如果他們太寬將其內容ellipsed ？ – cjl750

是的，這是正確的 – Keith

您可能需要顯示器撓性添加到您的TR。下面的CSS爲我工作。

table { 
     table-layout: fixed; 
     border-collapse: collapse; 
     width:100%; 
} 
tr{ 
    display: flex; 
} 
td{ 
     white-space: nowrap; 
     border: none; 
     padding: 0px; 
     text-align: left; 
     border-collapse: collapse; 
} 
#td2 { 
     overflow:hidden; 
     text-overflow: ellipsis; 
}

http://jsfiddle.net/krewn/opputmg3/1/

來源

2017-06-14 15:30:29 kpie

是的，這工作謝謝！我甚至沒有考慮過flex。 – Keith

更改表格的佈局：固定和溢出：隱藏？這會解決你的問題嗎？ here

來源

2017-06-14 14:53:35 tdmiller

第一個td標籤的長度會因文字而異，所以我不能在任何東西上設置最大寬度 – Keith

不可以，因爲我不能將一列固定寬度，它總是第一個 – Keith

您可以爲每個單獨的td指定特定的css，方法是向html中的td添加一個類，然後使用。類選擇器在CSS中。

<table> 
     <tr> 
      <td class="col1">This is the first div. 
      </td> 
      <td class="col2">This is the second div. This is the second div.This is the second div. This is the second div. This is the second div. 
      </td> 
      </tr> 
</table> 


table { 
     table-layout: fixed; 
     border-collapse: collapse; 
     width: 100%; 
} 
td{ 
     white-space: nowrap; 
     border: none; 
     padding: 0px; 
     text-align: left; 
     border-collapse: collapse; 
     overflow: hidden; 
} 
.col2 { 
     text-overflow: ellipsis; 
}

http://jsfiddle.net/krewn/qcypz5xk/

來源

2017-06-14 15:06:29 kpie

如果有多行呢？在html id中必須是唯一的 – Morpheus

會出現多行 – Keith

爲什麼down-vote？ Op不包含多行，無論您使用的是類而不是id。 – kpie

在表中使用省略號

回答

相關問題