表行数据垂直对齐

Question

在我的项目中，我有一个联系人表，其中包含一些信息列，如下所示

<table>
   <thead>
       <tr>
         <th>Name</th>
         <th>Designation</th>
         <th>Organization</th>
         <th>Address</th>
       </tr>
   </thead>
   <tbody>
       <tr>
         <td>Aziz</td>
         <td>Executive</td>
         <td>BIBT</td>
         <td>Dhaka</td>
       </tr>
       <tr>
         <td>Mizan</td>
         <td>Manager</td>
         <td>BIBT</td>
         <td>Dhaka</td>
       </tr>
    </tbody>
</table>

此表格结果如下

Name    Designation    Organization     Address
----   ------------   --------------   ----------
Aziz    Executive      BIBT             Dhaka
Mizan   Manager        BIBT             Dhaka

但在我的情况下，我需要另一个用于打印的表的视图，它将显示如下结果，

  | Aziz            |  |     Mizan           |
  | Executive, BUBT |  |     Manager, BUBT   |
  | Dhaka           |  |     Dhaka           |

如何为我的桌子实现这种布局？我使用datatable插件的一件事，我只需要这个布局用于打印目的。任何帮助表示赞赏。

Answer 1

您可以使用javascript转置表格。我假设你正在使用jquery，

首先，您需要稍微更改HTML标记，您可以隐藏和显示基于CSS媒体查询的元素，因此，我将相关类添加到span和td。

  <table>
   <thead>
       <tr>
         <th>Name</th>
         <th>Designation</th>
         <th>Organization</th>
         <th>Address</th>
       </tr>
   </thead>
   <tbody>
       <tr>
         <td>Aziz</td>
         <td>Executive<span class = 'display-on-print'> ,BIBT</span></td>
         <td class = 'hide-on-print'>BIBT</td>
         <td>Dhaka</td>
       </tr>
       <tr>
         <td>Mizan</td>
         <td>Manager <span display-on-print> ,BIBT</span></td>
         <td class = 'hide-on-print'>BIBT </td>
         <td>Dhaka</td>
       </tr>
    </tbody>
 </table>
 <button>Transpose</button>

现在，您可以使用jquery转置表，

$("button").click(function(){
    $("table").each(function() {
        var $this = $(this);
        var newrows = [];
        $this.find("tr").each(function(){
            var i = 0;
            $(this).find("td").each(function(){
                i++;
                if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
                newrows[i].append($(this));
            });
        });
        $this.find("tr").remove();
        $.each(newrows, function(){
            $this.append(this);
        });
    });

    return false;
});

Answer 2

<table>
   <tbody>
<thead>
       <tr>
         <td>Aziz</td>
         <tr>
           <td>Executive <span> BIBT </span></td>
     </tr>
<tr>
  <td>Dhaka</td>
     </tr>
       </thead>
  </tbody>
</table>