Css 在表格中使用省略号

我有一张表使用了省略号，但我陷入了相互矛盾的争论中。场景是一个我有一个带有tr标签和2个td的表。我需要第一个td是文本的宽度（边框折叠：折叠），这很好，但是，我需要表格的宽度是100%，所以在第二个td中我可以使用省略号。我还没有找到一种方法来折叠第一个td，并将第二个td用作省略号

这是第一组。
这是第二组，这是第二组，这是第二组，这是第二组，这是第二组。
这是第一组。
这是第二组，这是第二组，这是第二组，这是第二组，这是第二组。
这是第一组。
这是第二组，这是第二组，这是第二组，这是第二组，这是第二组。
桌子{
表布局：固定；
宽度：100%；
边界塌陷：塌陷；
}
表td{
空白：nowrap；
边界：无；
行高：未设置；
填充：0px；
文本对齐：左对齐；
}

更改表格布局：固定和溢出：隐藏？ 这能解决你的问题吗？

---

您可以为每个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;
}

这是第一组。
这是第二组，这是第二组，这是第二组，这是第二组，这是第二组。
桌子{
表布局：固定；
边界塌陷：塌陷；
宽度：100%；
}
运输署{
空白：nowrap；
边界：无；
填充：0px；
文本对齐：左对齐；
边界塌陷：塌陷；
溢出：隐藏；
}
.col2{
文本溢出：省略号；
}

---

您可能需要将display flex添加到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;
}

---

第一个td标签的长度会根据文本的不同而有所不同，因此我无法在任何内容上设置最大宽度。因为我无法将一列设置为固定宽度，所以它将始终是第一列的百分比。因此，您希望第一列的宽度与文本相符，然后第二列刚好被推过，如果它们太宽，它的内容将被省略？是的，这是正确的，如果有多行呢？在html中，id必须是唯一的。将有多行。为什么否决？Op没有多行，不管您是否可以使用class而不是id。这并不能解决我的问题。我知道我可以添加一个类到第二个，但它需要有一个宽度才能工作，因为我不能设置宽度，它不会工作。是的，这工作了，谢谢！我甚至没有想到flex。

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;
}