是否可以根据表单元格的内容在列上使用宽度的CSS转换

Question

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

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

我希望列中所有单元格的宽度都能平滑过渡到新的标题单元格宽度。目前，唯一平稳展开的元素是悬停在标题单元格中的展开容器，列中的实际单元格展开时没有转换到新计算的宽度。

我看到过其他例子(比如这个和这个(，人们设置宽度的动画，但似乎没有人将宽度设置为标题单元格内容设置的动态宽度。没有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属性设置动画时非常容易使用。