Question

我有一张2x3的桌子，左边的图像和右边的文本，布局错落在桌子的下方。

在表行中插入图例时，它不会填充该部分，它会向边缘添加填充，并且比其旁边的表数据小，即使它是表行的大小。包含文本和背景色的表格数据较大。表中的间距已关闭。

有什么方法可以使图像填充整个表格单元格而不添加额外的空间？

Answer 1

您可以使用td CSS属性为background-image提供背景图片。

td{
 border: 1px solid black;
 position: relative;
 height: 50px;
 width: 50px;
}
tr{
 border:2px solid grey;
}
.imgcontainer{
width: 150px;
height: 100px;
background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}

<table>
<tr>
<td class="imgcontainer">
</td>
<td>Table Cell</td>
</tr>
</table>

Answer 2

像这样？：D

table {
  width: 100%;
  border-collapse: collapse;
}

table td {
  border: 1px solid black;
  padding: 0px;
  vertical-align: top;
}

table td img {
  display: block;
  width: 100%;
}

<table>
  <colgroup>
    <col width="50%"/>
    <col width="50%"/>
  </colgroup>
  <tr>
    <td>Text</td>
    <td><img src="https://via.placeholder.com/100x30"></td>
  </tr>
  <tr>
    <td><img src="https://via.placeholder.com/200x20"></td>
    <td>Text<br/>Over<br/>Multiple<br/>lines</td>
  </tr>
  <tr>
    <td>Text</td>
    <td><img src="https://via.placeholder.com/400x50"></td>
  </tr>
  
</table>

HTML图片不会填满表格

2 个答案: