Javascript 将鼠标悬停在反应台上时更改td宽度

我使用react table包根据react table示例设置我的表组件。我添加了css

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis

因此，当我调整大小时，单元格文本不会溢出。我的问题是如何编写css，这样当我悬停在

td

上时，

td

的宽度变回全宽，以便可以完全显示文本？ 我试过了

.td:hover{
width: auto;
}

但它不起作用 我的代码沙盒

---

尝试一下

变换：scale（）

transform CSS属性允许旋转、缩放、倾斜或平移 元素。它修改CSS视觉对象的坐标空间 格式化模型

例如：

th:悬停，
td:悬停{
背景大小：100%100%；
变换：比例（1.5,1.5）；
变换原点：中心；
背景颜色：浅绿色；
}

1.
2.
3.

不，它不工作。鼠标悬停后，仅更改文本大小，而不是更改所有列width@jacobcan118请看我的最新答案。它也不起作用。因为宽度根本不会改变

.th:hover,
.td:hover {
  background-size:  100% 100%;
  transform:scale(1.5,1.5);
  transform-origin:center;
  background-color: lightgreen;
}