在 React 中调整 table 列大小时，文本被推到图像下方

Question

免责声明：我是初学者 CSS 所以标题可能不方便。如果您知道如何更好地重组标题，请编辑它:)

我在 React 中有一个自定义 DataTable 组件，我没有编写代码。 DataTable 具有一项功能，允许用户通过拖动来调整列的大小。我拥有的其中一列是 Data type 列。一开始，它看起来像图中的（1）。如果我在左边调整它的大小，它看起来像图片中的 (2)。我可以看到元素没有被推入而是被缩短了（也许在 td 元素下面？）。我决定在文本旁边添加图像，使其看起来像 (3)。但是，当我在左侧调整它的大小时，文本被推送，而不是像以前那样缩短，它看起来像 (4).

我有一个图像样式组件

const Image = styled.img`
  width: 20px;
  height: 20px;
  margin-right: 3px;
  float: left;
`;

然后我在我的数据表中使用这个组件，比如

<div>
   <Image src={src} />
   <span style={{ overflow: 'auto' }}>{columnDataType}</span>
</div>

显示带有文本的图像的 td 元素具有以下样式：

padding: 0px 10px 0px 10px;
position: relative;
border-bottom: 1px solid #eee;
background-color: transparent;

我关心的是，是否可以通过将图片放在文字旁边来实现（4）像（2）？如果是这样，最好的方法是什么？

Answer 1

你可以试试这个沙盒https://jsfiddle.net/w80qgdxe/

这就是我的结构。我这里没有 styled-component，所以我只用类代替。您可以在代码中将它们转换为 styled-component。

.image {
  width: 20px;
  height: 20px;
  margin: auto 3px auto 0; /* Aligned icon vertically */
}

.row {
  display: flex; /* Make row display */
  overflow: hidden; /* Make sure the content not going out of the box */
}

.content {
  margin: auto 0; /* Aligned content vertically */
  white-space: nowrap; /* Keep content on the same line */
}

<div class="row">
  <img src="https://cdn-icons-png.flaticon.com/128/1842/1842869.png" class="image" />
  <span class="content">Testing 123456</span>
</div>

在 React 中调整 table 列大小时，文本被推到图像下方

Text is pushed under image when table column is resized in React

html

css

styled-components