表行数据垂直对齐
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表行数据垂直对齐相关的知识，希望对你有一定的参考价值。
在我的项目中，我有一个联系人表，其中包含一些信息列，如下所示
<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插件的一件事，我只需要这个布局用于打印目的。任何帮助表示赞赏。
答案
您可以使用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;
});
另一答案
<table>
<tbody>
<thead>
<tr>
<td>Aziz</td>
<tr>
<td>Executive <span> BIBT </span></td>
</tr>
<tr>
<td>Dhaka</td>
</tr>
</thead>
</tbody>
</table>以上是关于表行数据垂直对齐的主要内容，如果未能解决你的问题，请参考以下文章