调整表格的最后一列以适应内容，但不调整第一列

Question

我有一个可拖动/可调整大小的小部件，里面有一个 HTML 表格。该表包含 2（也许 3）列。第一个是客户名单。第二个是客户类型列表。第三个（可选）是组首字母列表。信息的字体大小也是可配置的，可以变大或变小。

我想在这张桌子上展示（最好的方式）一些信息。我正在尝试几种配置。最后一个如下：

table {
  table-layout:fixed;
}

table td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

而简短的 HTML 代码是：

<table>
  <tbody>
    <tr>
      <td style="width:70%">1. DEPUTADA CRISTINA SILVESTRI</td>
      <td stype="width:20%">Não Informou</td>
      <td style="width:10%">PPS</td>
    </tr>
    <tr>
      <td style="width:70%">2. DEPUTADO ANDRE BUENO</td>
      <td stype="width:20%">Contra</td>
      <td style="width:10%">PDT</td>
    </tr>
    ...
  </tbody>
</table>

如果我像上面那样尝试，第一列最后会得到一个空白区域，第二列和第三列会剪切信息（带有省略号）（参见第一张名为 wrong.png 的图像）。我想要第二个图像（称为 ok.png）的结果。但是，如果我有一个大名字（第一列），我希望它用省略号将其削减 70%，因此可以显示最后两列（参见最后一张图片，名为 ok2.png）。最后，如果我有一张小桌子，我希望所有信息都用省略号显示，而不仅仅是第一列。我该怎么做？

图片：

Answer 1

IMOE，当我有复杂的表格场景时，我会在每个单元格中放置标签。利用 div 可以满足几乎所有需求的优势：

  <tr><td class='column_a'><div>...</div></td><td class='column_b'><div>...</div></td></tr>

嗨，

Answer 2

你需要设置最大宽度

td
{
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid red;
}

<table>
  <tbody>
    <tr>
      <td>1. DEPUTADA CRISTINA SILVESTRI</td>
      <td>Não Informou</td>
      <td>PPS</td>
    </tr>
    <tr>
      <td>2. DEPUTADO ANDRE BUENO</td>
      <td>Contra</td>
      <td>PDT</td>
    </tr>
  </tbody>
</table>