Place text in html table cell vertically?

Question

Place text in html table cell vertically?

Navigation

#1 by (9 votes)

3

I am looking for a way to place the text of a cell vertically, there is a code CSS that I use the transform to do that but when using it what it does is rotate the whole cell and damage the design.

What I want is to make this table:

but with the texts that go in year (the 2017) and the months that go in cells combined of vertical form.

I have this code, but as I said, it moves the whole cell and if it rotates the text but damages the design completely:

.verticalText {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}

<body>
<div id="div"><table border="1">
<tr id="Cabecera_1">
<th rowspan="2">Año</th>
<th rowspan="2">Mes</th>
<th rowspan="2">Día</th>
<th rowspan="2">Fecha</th>
<th rowspan="2">Añadir</th>
<th colspan="8">Horario</th>
</tr>
<tr id="Cabecera_2">
<th>Inicial</th>
<th>Final</th>
<th>Inicial</th>
<th>Final</th>
<th>Inicial</th>
<th>Final</th>
<th>Inicial</th>
<th>Final</th>
</tr>
<tr id="2017_Abril_Viernes_28">
<td rowspan="9" class="verticalText">2017</td>
<td rowspan="3" class="verticalText">Abril</td>
<td>Viernes</td>
<td>28</td>
<td>+</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="2017_Abril_Sabado_29">
<td>Sábado</td>
<td>29</td>
<td>+</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="2017_Abril_Domingo_30">
<td>Domingo</td>
<td>30</td>
<td>+</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- Mayo -->
<tr id="2017_Mayo_Lunes_1">
<td rowspan="3" class="verticalText">Mayo</td>
<td>Lunes</td>
<td>1</td>
<td>+</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="2017_Mayo_Martes_2">
<td>Martes</td>
<td>2</td>
<td>+</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="2017_Mayo_Miercoles_3">
<td>Miercoles</td>
<td>3</td>
<td>+</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table></div>
</body>

There is also the jsfiddle.net link to try it:

link

I appreciate your help.

html5 css3

asked by Fabian Montoya 24.03.2017 в 22:25

source

1 answer

Correct way to use different databases in a web platform? [closed] Move a node of type element

score 9 · Accepted Answer

There is the CSS property writing-mode: vertical-lr; which provides this functionality. Accompanied by a rotate you can get to give the design that you expect.

NOTE: Note that I have added a p tag and that I have added your class, since the text only inside the cell does not take effect because it is required that the text be in a special text label.

.verticalText {
writing-mode: vertical-lr;
transform: rotate(180deg);
}

<body>
<div id="div"><table border="1">
<tr id="Cabecera_1">
<th rowspan="2">Año</th>
<th rowspan="2">Mes</th>
<th rowspan="2">Día</th>
<th rowspan="2">Fecha</th>
<th rowspan="2">Añadir</th>
<th colspan="8">Horario</th>
</tr>
<tr id="Cabecera_2">
<th>Inicial</th>
<th>Final</th>
<th>Inicial</th>
<th>Final</th>
<th>Inicial</th>
<th>Final</th>
<th>Inicial</th>
<th>Final</th>
</tr>
<tr id="2017_Abril_Viernes_28">
<td rowspan="9"><p class="verticalText">2017</p></td>
<td rowspan="3"><p class="verticalText">Abril</p></td>
<td>Viernes</td>
<td>28</td>
<td>+</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="2017_Abril_Sabado_29">
<td>Sábado</td>
<td>29</td>
<td>+</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="2017_Abril_Domingo_30">
<td>Domingo</td>
<td>30</td>
<td>+</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- Mayo -->
<tr id="2017_Mayo_Lunes_1">
<td rowspan="3"><p class="verticalText">Mayo</p></td>
<td>Lunes</td>
<td>1</td>
<td>+</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="2017_Mayo_Martes_2">
<td>Martes</td>
<td>2</td>
<td>+</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="2017_Mayo_Miercoles_3">
<td>Miercoles</td>
<td>3</td>
<td>+</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table></div>
</body>