html - 如何将全 Angular 行放入具有图像的表格中

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>

问题:我想添加一个全 Angular 行，如红色区域中的箭头所示(上图)

注意:我无法将表格更改为 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>

小提示:改用内联样式类。