Question

查看包含图像和文字的表格的第一个td。

当文本完成整行并换行时，我希望它不要从图像下面开始。

下一行文字应该在图像后面开始，这意味着图像下方不应出现任何文字。

＆＃13;

table {
  border-collapse: collapse;
  width: 100%;
}
table, th, td {
  border: 1px solid black;
}

＆＃13;

<table>
  <tr>
    <td style="width:200px;">
      <img src="/images/driveicon.png">My Name is tester tester tester tester tester tester tester tester tester tester tester</td>
    <td>Some text</td>
    <td>Some text</td>
    <td>Some text</td>
    <td>Some text</td>
  </tr>
</table>

＆＃13;

Answer 1

您可以在表格单元格内使用弹性布局将图像和文本强制分开：

＆＃13;

td:first-child {
  display: flex;
  align-items: flex-start; /* prevent image from stretching */
  width: 200px;
}
table {
  border-collapse: collapse;
  width: 100%;
}
table, th, td {
  border: 1px solid black;
}

＆＃13;

<table>
  <tr>
    <td>
      <img src="http://www.w3schools.com/images/driveicon.png">
      My Name is tester tester tester tester tester
      tester tester tester tester tester tester
    </td>
    <td>Some text</td>
    <td>Some text</td>
    <td>Some text</td>
    <td>Some text</td>
  </tr>
</table>

＆＃13;

或者，您可以将文本放在单独的表格单元格中：

＆＃13;

table {
  border-collapse: collapse;
  width: 100%;
}
table, th, td {
  border: 1px solid black;
}

＆＃13;

<table>
  <tr>
    <td>
      <img src="http://www.w3schools.com/images/driveicon.png">
    </td>
    <td>My Name is tester tester tester tester tester tester tester tester tester tester tester</td>
    <td>Some text</td>
    <td>Some text</td>
    <td>Some text</td>
    <td>Some text</td>
  </tr>
</table>

＆＃13;

Answer 2

table {
    border-collapse: collapse;
    width:100%;
}
table, th, td {
   border: 1px solid black;
   white-space: nowrap;
}

<table>
	<tr>
    <td style="width:200px;"><img src="/images/driveicon.png">My Name is tester tester tester tester tester tester tester tester tester tester tester </td>
    <td>Some text</td>
    <td>Some text</td>
    <td>Some text</td>
    <td>Some text</td>
    </tr>
</table>

Answer 3

您唯一需要的是设置包含图像弹性显示的td：

td.imageContainer{
   display: flex;
   display: -webkit-flex;
}

防止文本在图像下方包裹

3 个答案: