根据表格单元格的内容，是否可以在列上使用CSS宽度过渡？

Question

我的目标是有一个带有标题的表格，当您将鼠标悬停在标题单元格上时，它可以平滑地扩展(使用CSS transition)到单元格内容的完整文本宽度。我目前的方法是让标题单元格中的文本容器具有固定的ch宽度，并让该容器在悬停时扩展为100%或固定的px宽度。

这样做的实际原因是，我正在处理的表的可用宽度非常有限，这将是一种在不删除列的情况下缩小整体宽度的方法。与在鼠标悬停时弹出工具提示相比，这种显示全文的方式在标题中显示全文会更有吸引力。

我希望列中所有单元格的宽度能够平滑地过渡到新的标题单元格宽度。当前，唯一平滑展开的元素是悬停在标题单元格中的展开容器，列中的实际单元格展开时不会过渡到新的计算宽度。

我见过其他的例子(比如this和this)，人们用动画的方式显示宽度，但是似乎没有人用动画的方式将宽度调整为由标题单元格的内容设置的动态宽度。如果没有js，这是可能的吗？

工作示例：

​

* {
  box-sizing: border-box;
  transition: width 250ms ease-out;
  white-space: nowrap;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th:hover .th-title {
  width: 100% !important;
}

th,
td {
  width: 100%;
}

.th-title {
  overflow: hidden;
}

#th-domain {
  width: 3ch;
}

#th-name {
  width: 4ch;
}

#th-key {
  width: 3ch;
}

#th-protocol {
  width: 4ch;
}

#th-ip {
  width: 7ch;
}

/* Styling code */
th,
td {
  font-family: Monaco, monospace;
  padding: 4px 8px;
}

th {
  color: #fff;
  background-color: #1d7490;
  height: 32px;
}

tbody>tr {
  border-bottom: 1px solid #bfbfbf;
}

<table>
  <thead>
    <tr>
      <th>
        <div id="th-domain" class="th-title">DomainDomain</div>
      </th>
      <th>
        <div id="th-name" class="th-title">NameName</div>
      </th>
      <th>
        <div id="th-key" class="th-title">KeyKey</div>
      </th>
      <th>
        <div id="th-protocol" class="th-title">ProtocolProtocol</div>
      </th>
      <th>
        <div id="th-ip" class="th-title">Last IPLast IP</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><label>Domain1</label></td>
      <td><label>Name1</label></td>
      <td><label>Key1</label></td>
      <td><label>Protocol1</label></td>
      <td><label>IP1</label></td>
    </tr>
    <tr>
      <td><label>Domain2</label></td>
      <td><label>Name2</label></td>
      <td><label>Key2</label></td>
      <td><label>Protocol2</label></td>
      <td><label>IP2</label></td>
    </tr>
    <tr>
      <td><label>Domain3</label></td>
      <td><label>Name3</label></td>
      <td><label>Key3</label></td>
      <td><label>Protocol3</label></td>
      <td><label>IP3</label></td>
    </tr>
    <tr>
      <td><label>Domain4</label></td>
      <td><label>Name4</label></td>
      <td><label>Key4</label></td>
      <td><label>Protocol4</label></td>
      <td><label>IP4</label></td>
    </tr>
  </tbody>
</table>

​

编辑:调整后的表格宽度

Answer 1

我没有找到用css做这件事的好方法，但是用js做起来很容易。我决定使用mouseenter和mouseleave事件通过anime.js库在目标元素上触发宽度动画，该库在设置css属性动画时非常容易使用。