【分享】商品页服装尺寸表table首行和首例交换位置

<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
writing-mode: vertical-lr;
}


td, th {
writing-mode: initial;
}
</style>
</head>
<body>
<tablewidth="100%"border="0"cellspacing="1"cellpadding="5"bgcolor="#eee">
<tbody><tr>
<th bgcolor="#eee" align="center">SIZE</th>
<th bgcolor="#eee" align="center">バスト</th>
<th bgcolor="#eee" align="center">ウエスト</th>
<th bgcolor="#eee" align="center">肩幅</th>
<th bgcolor="#eee" align="center">袖口幅</th>
<th bgcolor="#eee" align="center">ヒップ</th>
<th bgcolor="#eee" align="center">ワタリ幅</th>
<th bgcolor="#eee" align="center">前股上</th>
<th bgcolor="#eee" align="center">股下</th>
</tr><tr>
<th bgcolor="#eee" align="center">S</th>
<td bgcolor="#fff" align="center">88
</td>
<td bgcolor="#fff" align="center">60-85
</td>
<td bgcolor="#fff" align="center">36
</td>
<td bgcolor="#fff" align="center">15.5
</td>
<td bgcolor="#fff" align="center">136
</td>
<td bgcolor="#fff" align="center">44
</td>
<td bgcolor="#fff" align="center">40
</td>
<td bgcolor="#fff" align="center">49
</td>
</tr>
<tr>
<th bgcolor="#eee" align="center">M</th>
<td bgcolor="#fff" align="center">92
</td>
<td bgcolor="#fff" align="center">64-94
</td>
<td bgcolor="#fff" align="center">37
</td>
<td bgcolor="#fff" align="center">16
</td>
<td bgcolor="#fff" align="center">140
</td>
<td bgcolor="#fff" align="center">45
</td>
<td bgcolor="#fff" align="center">40
</td>
<td bgcolor="#fff" align="center">50
</td>
</tr>
<tr>
<th bgcolor="#eee" align="center">L</th>
<td bgcolor="#fff" align="center">96
</td>
<td bgcolor="#fff" align="center">68-103
</td>
<td bgcolor="#fff" align="center">38
</td>
<td bgcolor="#fff" align="center">16.5
</td>
<td bgcolor="#fff" align="center">144
</td>
<td bgcolor="#fff" align="center">46
</td>
<td bgcolor="#fff" align="center">40
</td>
<td bgcolor="#fff" align="center">51
</td>
</tr>
</tbody></table>
</body>
</html>

重点是这几行css,可以将原表格的首行变成首列,原表格的首列变成首行。

 

SIZE	バスト	ウエスト	肩幅	袖口幅	    ヒップ	ワタリ幅	前股上	股下
S	    88	    60-85	    36	    15.5	136	    44	    40	    49
M	    92	    64-94	    37	    16	    140	    45	    40	    50
L	    96	    68-103	    38	    16.5	144	    46	    40	    51

 

SIZE        S       M       L
バスト      88      92      96
ウエスト    60-85   64-94   68-103  
肩幅        36      37      38
袖口幅      15.5    16      16.5
ヒップ      136     140     144
ワタリ幅    44      45      46
前股上      40      40      40
股下        49      50      51

感谢您的时间观看本文。

 

 

请登录后发表评论