<html>
<head>
<style>
div {
width: 200px;
height: 200px;
border: 3px solid red;
text-align: center;
float: left;
}
</style>
<script>
a = "200px"
function f()
{
a = a=="200px" ? "350px" : "200px";
document.getElementById("d").style.width=a;
document.getElementById("d").style.height=a;
}
function t()
{
s = "";
s += "col 1: " + document.getElementById("c1").offsetWidth + "\n";
s += "col 2: " + document.getElementById("c2").offsetWidth + "\n";
s += "col 3: " + document.getElementById("c3").offsetWidth + "\n";
s += "row 1: " + document.getElementById("r1").offsetHeight + "\n";
s += "row 2: " + document.getElementById("r2").offsetHeight + "\n";
s += "row 3: " + document.getElementById("r3").offsetHeight + "\n";
alert(s);
}
</script>
</head>
<body>
<table border="1">
<tr>
<td></td>
<td id="c1">col 1</td>
<td width="50" id="c2">col 2</td>
<td id="c3">col 3</td>
</tr>
<tr>
<td id="r1">row 1</td>
<td rowspan=3 colspan=3>
<div id="d">tjosan</div>
</td>
</tr>
<tr>
<td height="50" id="r2">row 2</td>
</tr>
<tr>
<td id="r3">row 3</td>
</tr>
</table>
<input type="button" onClick="f();" value="expand">
<input type="button" onClick="t();" value="sizes">
</body>
</html>
Codebase Browser
chromium