如何將全寬行放入具有圖像的表格中

Question

我想插入一個全寬行，如下圖箭頭所示

我試過colspan ， rowspan但對我不起作用，所以從問題中刪除（否則問題會搞砸）。

這是我嘗試過的： https://jsfiddle.net/eabangalore/y3Lt470z/16/

 table td { padding: 5px; }

 <table width="500px" border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <th style="width:3%"></th> <th style="width:10%">Name</th> <th style="width:10%">Age</th> <th style="width:10%">Designation</th> </tr> </thead> <tbody> <tr> <td> <div style="width:50px;height:70px;border-radius:50%;"> <img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/> </div> </td> <td align="center">Alpha</td> <td align="center">21 year</td> <td align="center">Software</td> </tr> <tr> <td> <div style="width:50px;height:70px;border-radius:50%;"> <img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/> </div> </td> <td align="center">Alpha</td> <td align="center">21 year</td> <td align="center">Software</td> </tr> </tbody> </table>

Qusetion：我想添加一個全角行，如紅色區域中的箭頭所示（上圖）

注意：由於我正在進行維護項目，我無法將 table 更改為div 。

Answer 1

您正在尋找這個表結構。 您必須使用一次rowspan和一次colspan 。

 <table width="500px" border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th style="width:3%"></th> <th style="width:10%">Name</th> <th style="width:10%">Age</th> <th style="width:10%">Designation</th> </tr> </thead> <tr> <th class="" rowspan="2"> <img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/> </th> <th class="">1</th> <th class="">2</th> <th class="">3</th> </tr> <tr> <td class="" colspan="4">new row</td> </tr> <tr> <th class="" rowspan="2"> <img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/> </th> <th class="">a</th> <th class="">b</th> <th class="">c</th> </tr> <tr> <td class="" colspan="4">new row</td> </tr> </table>

小提示：改用內聯樣式類。