在表中使用省略号

我有一个表使用省略号，但我坚持与冲突的争论。这个场景是我有一个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

在表中使用省略号

回答

相关问题