html - img表格行内的tr宽度

如何使用CSS做到这一点？



https://jsfiddle.net/ou8sdfLo/

我想将<img>放在<tr>内，其widh等于<tr>。

我希望它足够清楚。

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

最佳答案

图像必须位于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

关于html - img表格行内的tr宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42889556/