如何使图像完全覆盖表格单元格？

Question

出于某种原因，我所覆盖的图像除了整个表格的1个像素（标有红色）之外都会覆盖页面的整个设计，任何想法我能做些什么来修复它？

table,
td,
th {
  border-color: transparent;
}
td.Image {
  color: white;
  position: relative;
}
td.Image img {
  width: 100%;
  display: table;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
div.Text {
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  bottom: 0;
  width: 100%;
  display: table;
}

<table width="50%">
  <tr>
    <th height="120px" colspan="4" align="left" bgcolor="ffffff"><font size="8">Title</font>
    </th>
  </tr>
  <tr bgcolor="red">
    <td class="Image" height="auto" width="25%" align="left">
      <img src="https://support.files.wordpress.com/2009/07/pigeony.jpg?w=688">
      <div class="Text"><font size="4"><b>Text<br>goes here</b></font>
      </div>
    </td>
  </tr>
</table>

Answer 1

尝试将tr添加到列表中，然后将display: inline添加到css中。

像这样：

table, tr, td, th {border-color: transparent; display: inline !important;}

这是一个有效的例子：

<style type="text/css">
  table,
  tr,
  td,
  th {
    border-color: transparent;
    display: inline !important;
  }
  td.Image {
    color: white;
    position: relative;
  }
  td.Image img {
    width: 100%;
    display: table;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  div.Text {
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    bottom: 0;
    width: 100%;
    display: table;
  }
</style>
<table width="50%">
  <tr>
    <th height="120px" colspan="4" align="left" bgcolor="ffffff"><font size="8">Title</font>
    </th>
  </tr>
  <tr bgcolor="red">
    <td class="Image" height="auto" width="25%" align="left">
      <img src="https://support.files.wordpress.com/2009/07/pigeony.jpg?w=688">
      <div class="Text"><font size="4"><b>Text<br>goes here</b></font>
      </div>
    </td>
  </tr>
</table>
</body>

Answer 2

只需在

中添加padding:0px;即可

table,
td,
th {
    border-color: transparent;
    padding:0;
}

table,
td,
th {
  border-color: transparent;
  padding:0;
}
td.Image {
  color: white;
  position: relative;
}
td.Image img {
  width: 100%;
  display: table;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
div.Text {
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  bottom: 0;
  width: 100%;
  display: table;
}

<table width="50%">
  <tr>
    <th height="120px" colspan="4" align="left" bgcolor="ffffff"><font size="8">Title</font>
    </th>
  </tr>
  <tr bgcolor="red">
    <td class="Image" height="auto" width="25%" align="left">
      <img src="https://support.files.wordpress.com/2009/07/pigeony.jpg?w=688">
      <div class="Text"><font size="4"><b>Text<br>goes here</b></font>
      </div>
    </td>
  </tr>
</table>