img tr表格寬度爲

Question

如何使用CSS做到這一點？

https://jsfiddle.net/ou8sdfLo/

我想提出一個<img>內<tr>等於其<tr>一個widh。

我希望它很清楚。

我修改了圖像以匹配代碼。

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>行中，您需要在<td>上設置一個colspan，該總數等於列的總數。

像這樣：

<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>