在react-table上悬停时更改td宽度

Question

我使用react-table包根据react-table示例reac-table, full-width-resizable-table设置我的表组件。我添加了css

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

因此，当我调整大小时，单元格文本不会溢出。我的问题是，我如何编写css，当我悬停td时，td的宽度会变回全宽，这样文本就可以完全显示出来？我试过了

.td:hover{
width: auto;
}

但是它不能在我的codesandbox codesandbox上工作。

Answer 1

试一试transform :scale()

As mdn says:

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

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

举个例子：

​

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

<table>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
</table>

​

更新：

如果你想增加表的width，那么near列也会增加。但是如果你愿意，你可以试试：

​

   td {
  border: 1px solid black;
  height: 50px;
  max-width: 100px;
}

td:hover {
  background-color: chocolate;
  height: 50px;
  max-width: 300px;
  /* max-width: 100px; */
}

  <table>
<tr>
  <td>Some text</td>
  <td>Icon1 Icon 2 Icon3</td>
</tr>
<tr>
  <td>Some text</td>
  <td>Icon1 Icon 2 Icon3</td>
</tr>
<tr>
  <td>Some text</td>
  <td>Icon1 Icon 2 Icon3</td>
</tr>
  </table>

​