Hi everyone,
I try to work with css's position but it seems like I cannot handle it.
My code is consisted of a table inside a div.
The div's postion style is "relative" so that its' attributes will refer to the html page.
The table's position attribute is "absolute" so it should relate to its' ancestor: the above described div.
When I run the following code, the table disappears !
Why ?!
I try to work with css's position but it seems like I cannot handle it.
My code is consisted of a table inside a div.
The div's postion style is "relative" so that its' attributes will refer to the html page.
The table's position attribute is "absolute" so it should relate to its' ancestor: the above described div.
When I run the following code, the table disappears !
Why ?!
Code:
<html !doctype>
<head>
<style>
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote,a, abbr, acronym, address, big, cite, del,
dfn, em, img, ins, kbd, small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time,
mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%;font: inherit;vertical-align: baseline;}
.wrap {margin-top: 10%; margin-right: auto; margin-bottom: 10% margin-left:auto; position: relative; border-style: dashed; overflow:hidden;}
.myTable {direction:rtl; width:100% ; border-collapse: collapse; border: 1px solid black;position: absolute}
</style>
</head>
<body>
<div class="wrap">
<table class = "myTable">
<tr>
<th>a</th>
<th>b</th>
<th>c/th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</div>
</body>
</html>