My code is consisted of a table inside a div

HTML & CSS
1

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 ?!

<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>
2

The div has css rule “overflow: hidden”;
The table is absolute positioning, so the div’s height is 0, the table is “overflow”, then is “hidden”.:slight_smile:

2 Likes
3

First of all, you should validate your code.
The Doctype declaration and html tags should be two separate tags.

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
   </body>
</html>

Also one of the closing th tags is missing a <.
@WseMad is correct, the table does not show because the div has no height, as if there was no content. That is because an element with absolute positioning is taken out of the flow, so takes no space in its parent container.
I may question why you have applied absolute positioning to the table. What is the effect you want to achieve?

1 Like
4

Thanks,
No effect so far. I thought it’s a good practice to have elements reside in divs. Absolute, far as I understand, its’ measures relate to its’ ancestor which is the div. If position was “relative” then it would refer to the html page.

5

If there is a reason to put the element in a container you should, but it is not always a necessity to wrap your elements in a div.

Relative can offset an element from its original position, but it retains its space in the flow where it originally was. Absolute removes an element from the flow, so it takes no space. If the parent of an absolute element is relative, the element’s position will be set within its parent. If the parent is not relative, it will be positioned in the document.
Use absolute positioning only when there is a good reason for it, which is quite rare.
For the most part you should not need to alter positioning for your elements, but leave them in the natural flow of the document.
I can’t think of a case for a table needing absolute positioning.

This may help you understand more about positioning in css:-

2 Likes
6

Thank you very much !

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.