前端导出excel表格多个tr并排展示
时间: 2023-12-14 18:04:54 浏览: 37
可以使用table中的colspan属性来实现多个tr并排展示。具体方法如下:
1. 在table中添加一个新的tr,作为表头,用来描述每个tr的内容。
2. 在每个tr中,使用colspan属性指定该tr要占据的列数。
3. 设置每个tr的display属性为inline或inline-block,使其能够在同一行中展示。
4. 使用CSS样式来设置每个tr的宽度,使其能够均匀分布在表格中。
下面是一个示例代码:
```html
<table>
<tr>
<th>姓名</th>
<th>电话</th>
<th>邮件</th>
</tr>
<tr style="display: inline-block; width: 30%;">
<td colspan="3">公司 A</td>
</tr>
<tr style="display: inline-block; width: 30%;">
<td>张三</td>
<td>123456789</td>
<td>zhangsan@example.com</td>
</tr>
<tr style="display: inline-block; width: 30%;">
<td>李四</td>
<td>987654321</td>
<td>lisi@example.com</td>
</tr>
<tr style="display: inline-block; width: 30%;">
<td colspan="3">公司 B</td>
</tr>
<tr style="display: inline-block; width: 30%;">
<td>王五</td>
<td>555555555</td>
<td>wangwu@example.com</td>
</tr>
<tr style="display: inline-block; width: 30%;">
<td>赵六</td>
<td>666666666</td>
<td>zhaoliu@example.com</td>
</tr>
</table>
```
在上面的代码中,第一个tr是表头,后面的tr通过设置display属性为inline-block和colspan属性来实现多个tr并排展示。同时,使用CSS样式来设置每个tr的宽度,使其能够在同一行中均匀分布。
相关推荐
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)