表结构的转换(横->竖)

现有一个表:
表A
adress  pepole
宁波   张三(NB)
宁波   李四(NB)
宁波   王五(NB)
杭州   张三(HZ)
杭州   李四(HZ)
杭州   王五(HZ)
转化为表
表B
NBpepole HZpepole
张三(NB) 张三(HZ)
李四(NB) 李四(HZ)
王五(NB) 王五(HZ)

/*
现有一个表:
表T
adress  pepole
宁波   张三(NB)
宁波   李四(NB)
宁波   王五(NB)
杭州   张三(HZ)
杭州   李四(HZ)
杭州   王五(HZ)
转化为表
表B
NBpepole HZpepole
张三(NB) 张三(HZ)
李四(NB) 李四(HZ)
王五(NB) 王五(HZ)

解答:

*/
drop table T
create table T(adress nvarchar(10),pepole nvarchar(10))
insert T select '宁波',   '张三(NB)'
union all select '宁波',   '李四(NB)'
union all select '宁波',   '王五(NB)'
union all select '杭州',   '张三(HZ)'
union all select '杭州',   '李四(HZ)'
union all select '杭州',   '王五(HZ)'
union all select '杭州',   '王五2(HZ)'
union all select '杭州',   '王五3(HZ)'
union all select '温州',   '张三(WZ)'
union all select '温州',   '李四(WZ)'

select * from t

drop table #t1
drop table #t2
drop table #t3
select ID=identity(int,1,1),* into #T1 from T where adress='宁波'
select ID=identity(int,1,1),* into #T2 from T where adress='杭州'
select ID=identity(int,1,1),* into #T3 from T where adress='温州'

select * from #t1
select * from #t2
select * from #t3

drop table B
create table B(NBpepole nvarchar(10),HZpepole nvarchar(10),WZpepole nvarchar(10))
insert into B(NBpepole,HZpepole,WZpepole)
select #T1.pepole,#T2.pepole,#T3.pepole
from #T1
full join #T2 on #T1.ID=#T2.ID full join #T3 on #T2.ID=#T3.ID

select * from B 

将 HTML 中 `<table>` 表格的表头从向排列变为竖向排列,有以下几种常见方法: ### 方法一:使用 CSS 的 `writing-mode` 属性 `writing-mode` 属性可以改变文本的书写方向,从而实现版表头。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table { border-collapse: collapse; } th { writing-mode: vertical-rl; /* 从右向左垂直书写 */ border: 1px solid #ccc; padding: 8px; } td { border: 1px solid #ccc; padding: 8px; } </style> </head> <body> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> </table> </body> </html> ``` ### 方法二:使用 CSS 布局转换行列 通过 CSS 的 `display: flex` 或 `display: grid` 布局,将表格的行和列进行转换。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table { display: flex; flex-direction: column; } tr { display: flex; flex-direction: row; } th, td { border: 1px solid #ccc; padding: 8px; } </style> </head> <body> <table> <tr> <th>Header 1</th> <td>Data 1</td> </tr> <tr> <th>Header 2</th> <td>Data 2</td> </tr> <tr> <th>Header 3</th> <td>Data 3</td> </tr> </table> </body> </html> ``` ### 方法三:手动调整 HTML 结构 手动将表头和表格数据的 HTML 结构进行调整,使表头变为竖向排列。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table { border-collapse: collapse; } th, td { border: 1px solid #ccc; padding: 8px; } </style> </head> <body> <table> <tr> <th>Header 1</th> <td>Data 1</td> </tr> <tr> <th>Header 2</th> <td>Data 2</td> </tr> <tr> <th>Header 3</th> <td>Data 3</td> </tr> </table> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值