html表格背景图片不起作用

Question

我正在尝试显示表格的背景图像，但不适用于整个表格。这是代码：

echo"
        <font color='white'>
        <table  width=620 height=600 border='1' style='background-image:url(good.jpg); background-repeat:no-repeat;' >  
        <col width=40%>
  <col width=60%>

        <tr bgcolor='#0B0B61' >
        <th > &nbsp; Results for <strong>Tracking Number:</strong>    </th>
        <th>&nbsp; ". $tid . "</th> 

         </tr>

        <tr bgcolor='#0B0B61' >
        <td><strong> &nbsp; Status:</strong> </td>
        <td>&nbsp;". $status .  "</td>
        </tr>
</table>

如果我将其设置为表行或td，它会起作用。

Answer 1

您为每行设置背景颜色，该颜色将覆盖表格背景。

我必须说您的代码看起来像您15年前编写的代码。 您应该使用class而非内联样式，例如bgcolor，<strong>，width，border

例如：

.your-table {
  color: white;
  width: 620px;
  height: 600px;
  border: 1px solid black;
  background-image: url('https://gallery-wallpaper.com/wp-content/uploads/2018/02/beach-scene-wallpaper-for-desktop-desktop-wallpaper-beach-scenes.jpg');
  background-repeat: no-repeat;
}

.first-col{
  width: 40%;
}

.second-col{
  width: 60%;
}

.tracking-number, .status{
  font-weight: bold;
}

td{
  padding-left: 15px;
}

<table class='your-table'>
  <col class='first-col'>
  <col class='second-col'>
  <tr>
    <th>Results for <span="tracking-number">Tracking Number:</span> </th>
    <th>". $tid . "</th>
  </tr>
  <tr>
    <td class='status'>Status:</td>
    <td>". $status . "</td>
  </tr>
</table>

Answer 2

.table-bg {
  width: 300px;
  height: 300px;
  border: 1px solid blue;
  background-image: url("https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45");
  background-repeat: no-repeat;
}

<table class='table-bg'>
  <col width=100%>

  <tr>
    <td><strong> &nbsp; Status:</strong> </td>
    <td>&nbsp;". $status . "</td>
  </tr>
</table>