img里面有tr宽度的表行

Question

如何使用CSS执行此操作？

https://jsfiddle.net/ou8sdfLo/

我想在<img>内加<tr>，其宽度等于<tr>。

我希望它足够清楚。

我修改了图片以匹配代码。

Answer 1

图片需要位于td，如果您希望td跨越tr的整个宽度，请使用colspan属性。然后，如果您希望img填充td的宽度，请使用display: block; width: 100%;

table {
  border-collapse: collapse;
}

tbody tr:hover {
  background: #eee;
}

td:first-child {
  text-align: left;
}

th {
  background: #888;
  color: white;
}

td,
th {
  padding: 0.75em;
  text-align: center;
}

img {
  width: 100%;
  display: block;
}

<table>

  <tr>
    <th>Model</th>
    <th>Max speed</th>
    <th>Power</th>
    <th>Swept volume</th>
    <th>Weight</th>
  </tr>

  <tr>
    <td>Car 1</td>
    <td>45 mph (72 km/h)</td>
    <td>22 hp</td>
    <td>2865 ccm</td>
    <td>800 kg</td>
  </tr>

  <tr>
    <td colspan="5"><img src="http://placehold.it/350x150" alt="car_preview"></td>
  </tr>

  <tr>
    <td>Car 2</td>
    <td>45 mph (72 km/h)</td>
    <td>22 hp</td>
    <td>2865 ccm</td>
    <td>800 kg</td>
  </tr>

  </table

Answer 2

<tr>中唯一有效的标记是<td>。 在<img>行中，您需要在colspan上设置<td>等于总列数。

像这样：

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
 </tr>
 <tr>
   <td colspan="6"></td>
 </tr>
 <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
 </tr>