html表单文本转换,html – 如何在表格td内旋转文本？

有一个名为writing-mode的CSS属性接受这三个值中的一个; horizo​​ntal-tb,vertical-rl和vertical-lr.

horizo​​ntal-tb是默认值,它会导致元素中典型的左右水平文本流.

但是vertical- *值用于垂直块流,导致浏览器从上到下写入文本.在vertical-rl中,对于vertical-lr,新行添加到前一行的左侧,反之亦然.

这对于显示通常从上到下编写的中文和日文等语言非常有用,也适用于希望垂直显示文本以节省水平空间的语言,如表格标题中所示.

div {

font-family: courier new;

}

table {

table-layout: fixed;

border-collapse: collapse;

}

table tr:not(:first-child) th {

display: inline-block;

-webkit-writing-mode: vertical-rl;

-ms-writing-mode: tb-rl;

writing-mode: vertical-rl;

}

th {

padding: 6px;

}

#writing-mode img {

width: 35px;

}

td {

width: 40px;

border: 1px dotted black;

}

tr:nth-child(2) th {

background: #69D2E7;

}

tr:nth-child(2) td {

background: #A7DBD8;

}

tr:nth-child(3) td {

background: #F1D4AF;

}

tr:nth-child(3) th {

background: #E08E79;

}

tr:nth-child(4) td {

background: #CFF09E;

}

tr:nth-child(4) th {

background: #79BD9A;

}

tr:nth-child(5) td {

background: #D5DED9;

}

tr:nth-child(5) th {

background: #99B2B7;

}

tr:nth-child(6) td {

background: #EBE3AA;

}

tr:nth-child(6) th {

background: #CAD7B2;

}

#browser-support {

background: ivory;

border-left: 6px skyblue solid;

font-family: courier new;

font-size: 14px;

margin: 12px 0;

padding: 6px;

}

Time Table

	1	2	3	4	5	6	7	8
Monday
Tuesday
Wednesday
Thursday
Friday