Rotate Rowspan Table Cell In HTML, CSS, JS

Jumat, 11 April 2025

Rotate Rowspan Table Cell In HTML, CSS, JS

1. Type this following HTML code in Web editor:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

th.rotate {

height: 100%;

white-space: nowrap;

vertical-align: middle;

text-align: center;

}

th.rotate > div {

transform:

translate: (25px, 51px)

rotate(-90deg);

width: 1.75em;

vertical-align: middle;

margin-left: -100;

margin-right: -100;

/* Legacy vendor prefixes that you probably don't need... */

/* Safari */

-webkit-transform: rotate(-90deg);

/* Firefox */

-moz-transform: rotate(-90deg);

/* IE */

-ms-transform: rotate(-90deg);

/* Opera */

-o-transform: rotate(-90deg);

/* Internet Explorer */

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

th.rotate > div > span {

padding: 5px 15px;

vertical-align: middle;

display: block;

width: 100%;

height: 100%;

direction: rtl;

}

.cellnowrap {white-space:nowrap;}

</style>

</head>

<body>

<tr>

<th colspan="7">Sawah</th>

<th colspan="7">Tanah Kering</th>

</tr>

<tr>

<th rowspan="3">Nomor Persil dan Huruf Bagian Persil</th>

<th rowspan="3" width="1" class="rotate"><div><span>KelasDesa</span></div></th>

<th colspan="4">Menurut Daftar Perincian</th>

<th rowspan="3">Sebab Dan tanggal perubahan</th>

<th rowspan="3">Nomor Persil dan Huruf Bagian Persil</th>

<th rowspan="3" width="1" class="rotate"><div><span>KelasDesa</span></div></th>

<th colspan="4">Menurut Daftar Perincian</th>

<th rowspan="3">Sebab Dan tanggal perubahan</th>

</tr>

<tr>

<th colspan="2">Luas milik</th>

<th colspan="2">Pajak</th>

<th colspan="2">Luas milik</th>

<th colspan="2">Pajak</th>

</tr>

<tr>

</tr>

<tr>

<td>Jual Beli<br />13 Januari 1990</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

window.addEventListener('load', function () {

var rotates = document.getElementsByClassName('rotate');

for (var i = 0; i < rotates.length; i++) {

rotates[i].style.height = rotates[i].offsetWidth + 'px';

}

});

</script>

</body>

</html>

2. Save the file as rotateRowspanTableCell.html

3. To see the output, open the file using browser (e.g. Google Chrome).

Output

< back to Learn HTML

< previous HTML Table Element

Bibliography

Web and Internet e-books series O'reilly

Web development e-books series Prentice Hall

Web development and Web programming Wrox

Environment variable 1

Fungsi Menu Google Chrome

Microsoft Excel Terms 1

Kursus dan Bimbingan Belajar

Cari Blog Ini

Jumat, 11 April 2025