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

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>

我只能让这两列都缩小，但我需要我的第一列保持这种状态，而不是在其他行中反弹文本，而我的第二列在我缩小页面时显示省略号。

标签： htmlcss

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

在这里阅读更多