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

Question

我的目标是让 table 和 header 平滑地扩展（使用 CSS transition）到单元格内容的全文宽度，当你将鼠标悬停在 header 单元格上。我当前的方法是在 header 单元格中设置文本容器的固定 ch 宽度，并在悬停时让该容器扩展到 100% 或固定 px 宽度。

这样做的实际原因是我正在使用的 table 可用宽度非常有限，这是一种在不删除列的情况下缩小整体宽度的方法。与悬停时弹出工具提示相比，这种显示全文的方式是在 header 中显示全文的一种更奇特的方式。

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

我见过其他示例（如 this and ），其中人们设置了宽度动画，但似乎没有人将宽度设置为由标题单元格的内容设置的动态宽度。没有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>

编辑：调整 table

的宽度

Answer 1

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

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

Is it possible to use CSS transition of width on a column depending on the content of a table cell?

html

css

html-table

css-transitions