<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>display:inline-block</title>
<style type='text/css'>
tr { vertical-align: top; }
table { width: 50em;}
.nobreak {white-space: nowrap;}
</style>
</head>
<body>
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</td>
<td>/usr/local/share/foo/bar.txt</td>
</tr>
</table>
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</td>
<td class='nobreak'>/usr/local/share/foo/bar.txt</td>
</tr>
</table>
<hr>
See also <a href='../properties/white-space.html'>The whitespace property</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>border</title>
<style type="text/css">
table#B {
border-collapse: collapse;
}
tr {
border-bottom: #2b3 4px dotted;
}
table {
background-color: #f7fcf9;
}
td {
padding: 0.4em;
}
</style>
</head>
<body>
Two tables: both are equal except that table B has the <code>border-collapse</code> set to <code>collapse</code>.
<h1>Table A</h1>
Without the border-collapse property set to collapse, the <code>border-bottom</code> property of <code>tr</code> elements is not applied:
<table id='A'>
<tr>
<td>foo</td><td>bar</td><td>baz</td>
</tr><tr>
<td>one</td><td>two</td><td>three</td>
</tr>
</table>
<h1>Table B</h1>
Yet, with the border-collapse property set to collapse, the <code>border-bottom</code> property of <code>tr</code> elements is applied:
<table id='B'>
<tr>
<td>foo</td><td>bar</td><td>baz</td>
</tr><tr>
<td>one</td><td>two</td><td>three</td>
</tr>
</table>
<hr>
See also <a href='collapse.html'>border-collapse</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>Test 01</title>
<link rel="stylesheet" type="text/css" href="test_x.css">
<style type='text/css'>
img {
position: absolute;
top: 0px;
left: 0px;
}
#qrst {
font-size: 200px;
color: red;
font-family: sans-serif;
}
</style>
</head>
<body>
<div id='qrst'>
Q R<br>
S T
</div>
<img src="image_200x200.png" />
<div id='text'>
The image has <code>position: absolute</code>.
<br>The text does not have any position absolute.
<br>The text is behind the image:
when the <code>div</code>
comes before the <div>img</div> (this page) or after (<a href='test_02.html'>test_02.html</a>).
<br>See also <a href='test_03.html'>test_03.html</a> and <a href='test_04.html'>test_04.html</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>Test 02</title>
<link rel="stylesheet" type="text/css" href="test_x.css">
<style type='text/css'>
img {
position: absolute;
top: 0px;
left: 0px;
}
#qrst {
font-size: 200px;
color: red;
font-family: sans-serif;
}
</style>
</head>
<body>
<img src="image_200x200.png" />
<div id='qrst'>
Q R<br>
S T
</div>
<div id='text'>
The image has <code>position: absolute</code>.
<br>The text does not have any position absolute.
<br>The text is behind the image:
when the <code>div</code>
comes after the <div>img</div> (this page) or before (<a href='test_01.html'>test_01.html</a>).
<br>See also <a href='test_03.html'>test_03.html</a> and <a href='test_04.html'>test_04.html</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>Test 03</title>
<link rel="stylesheet" type="text/css" href="test_x.css">
<style type='text/css'>
img {
position: absolute;
top: 0px;
left: 0px;
}
#qrst {
top: 0px;
left: 0px;
position: absolute;
font-size: 200px;
color: red;
font-family: sans-serif;
}
</style>
</head>
<body>
<div id='qrst'>
Q R<br>
S T
</div>
<img src="image_200x200.png" />
<div id='text'>
The image <b>and</b> the div both have <code>position: absolute</code>.
<br>The text is behind the image when the div is placed before the image (this page).
<br>When the div is placed after the image, it's put above the image (<a href='test_04.html'>test_04.html</a>).
<br>See also <a href='test_01.html'>test_01.html</a> and <a href='test_02.html'>test_02.html</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>Test 04</title>
<link rel="stylesheet" type="text/css" href="test_x.css">
<style type='text/css'>
img {
position: absolute;
top: 0px;
left: 0px;
}
#qrst {
position: absolute;
top: 0px;
left: 0px;
font-size: 200px;
color: red;
font-family: sans-serif;
}
</style>
</head>
<body>
<img src="image_200x200.png" />
<div id='qrst'>
Q R<br>
S T
</div>
<div id='text'>
The image <b>and</b> the div both have <code>position: absolute</code>.
<br>The text is above the image when the div is placed after the image (this page).
<br> When the div is placed before the image, it's put behind the image (<a href='test_03.html'>test_03.html</a>).
<br>See also <a href='test_01.html'>test_01.html</a> and <a href='test_02.html'>test_02.html</a>
</div>
</body>
</html>