How to have a full-width row into a table having image-CodePudding

I want to insert a full width row as shown in the below image by Arrow

I have tried colspan, rowspan but did not work for me so removed from question (otherwise question will mess up).

here is what i have tried: 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: i want to add a full-width row as shown by arrow in red color area (above image)

Note: i cannot change table into divs as i'm working on maintenance project.

CodePudding user response：

You looking for this table structure. You have to use once rowspan and once 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  rowspan="2">
       <img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
    </th>
    <th >1</th>
    <th >2</th>
    <th >3</th>    
  </tr>
  <tr>
    <td  colspan="4">new row</td>
  </tr>
  
  <tr>
    <th  rowspan="2">
       <img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
    </th>
    <th >a</th>
    <th >b</th>
    <th >c</th>    
  </tr>
  <tr>
    <td  colspan="4">new row</td>
  </tr>  
</table>

Small Note: use instead inline style classes.