表格行数据垂直对齐答案

【问题标题】：Table row data align vertically表格行数据垂直对齐
【发布时间】：2018-09-17 18:42:20
【问题描述】：

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

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

如何为我的表格实现这种布局？我正在使用数据表插件的一件事，我需要这个布局仅用于打印目的。任何帮助表示赞赏。

【问题讨论】：

标签： html css printing html-table datatables

【解决方案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;
});

【讨论】：

我可以将新布局导出到另一个选项卡以进行打印并保持我的主表完好无损吗？
你不需要那个。我提供的方法是转置表格，所以如果你调用该函数两次，它会再次以原始形式转置表格，所以你的方法应该是：transpose() --> window.print() --> transpose() .这将转置表格，打开打印选项卡并再次将表格转置回其原始状态

【解决方案2】：

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

【讨论】：