仅显示第二个表行的省略号

Question

以下是我目前的情况：https://jsfiddle.net/rhercb/a4b2L95n/

代码：

.house_info_table {
  width: 100%;
}

.house_info_table td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table class="house_info_table">
  <tr>
    <td class="">TEST DU:</td>
    <td class="">xxxxxx</td>
  </tr>
  <tr>
    <td>TEST DU:</td>
    <td>xxxxxx</td>
  </tr>
  <tr>
    <td>Awailable thing here:</td>
    <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  </tr>
  <tr>
    <td>TEST DU:</td>
    <td>xxxxx</td>
  </tr>
  <tr>
    <td>TEST DU:</td>
    <td>xxxxxxxxx</td>
  </tr>
</table>

我只能让这两个列缩小，但是我需要我的第一个列保持这样而不是在另一行反弹文本，而我的第二个在缩小页面时显示省略号。

Answer 1

您可以使用nth-child伪选择器：

.house_info_table td {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.house_info_table td:nth-child(2) {
  text-overflow: ellipsis;
}

Read more here

Answer 2

我已将min-width与width一起使用。这是你想要的吗？

＆＃13;

＆＃13;

.house_info_table {
  width: 100%;
}

.house_info_table td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.first-part {
  min-width: 140px;
  width: 150px;
}

＆＃13;

<table class="house_info_table">
  <tr>
    <td class="first-part">TEST DU:</td>
    <td class="">xxxxxx</td>
  </tr>
  <tr>
    <td class="first-part">TEST DU:</td>
    <td>xxxxxx</td>
  </tr>
  <tr>
    <td class="first-part">Awailable thing here:</td>
    <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  </tr>
  <tr>
    <td class="first-part">TEST DU:</td>
    <td>xxxxx</td>
  </tr>
  <tr>
    <td class="first-part">TEST DU:</td>
    <td>xxxxxxxxx</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;