此段代码可以让表格的竖列变成横列显示,如果表格已经渲染好,此时需求需要你横排显示竖列的内容,就可以用到
先在HTML中写一个表格
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>产品名称</th>
<th>衣服</th>
<th>鞋子</th>
<th>包包</th>
<th>护肤品</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>12</td>
<td>1</td>
<td>23</td>
<td>43</td>
</tr>
<tr>
<td>24</td>
<td>45</td>
<td>34</td>
<td>45</td>
<td>45</td>
</tr>
</tbody>
</table>
css样式
table {
position: relative;
width: 100%;
display: block;
}
thead {
float: left;
}
tbody tr {
display: inline-block;
}
th, td {
height: 45px;
display: block;
}