Home/ Questions/Q 8589059
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T22:57:15+00:00

I have a table with absolute positioneg paragraphs inside <p> . It renders as

  • 0

I have a table with absolute positioneg paragraphs inside <p>. It renders as I want it to in Chrome and Opera, but in Firefox all the numbers are outside the table and crammed together. I’ve tried adding position: relative; to all parent element, but it didn’t help much. Where’s the problem? I quess it’s something simple.

That’s how it looks: http://i50.tinypic.com/34diewz.png (I’m a new user, can’t upload images yet)

Also these <p>‘s must be postitioned absolute, because there are other element in table cells in full project – this code is just a small part. Here it is:

<!DOCTYPE html>
<html>
   <head>
      <style>
         * { margin: 0; padding: 0; } /* Just a quick reset, I use proper one in full project */

         table {
            background-color: #296B73;
         }

         td {
            position: relative;
            height: 40px; width: 40px;
            border: 1px solid #0F2D40;
         }

         p {
            position: absolute;
            top: 28%; left: 50%;
            margin-left: -5px;
         }

         td:nth-child(1) { width: 50px; }
         td:nth-child(2) { width: 75px; }
         td:nth-child(3) { width: 100px; }
      </style>
   </head>
   <body>
      <table>
         <tr>
            <td><p>1</p></td>
            <td><p>2</p></td>
            <td><p>3</p></td>
         </tr>
         <tr>
            <td><p>1</p></td>
            <td><p>2</p></td>
            <td><p>3</p></td>
         </tr>
         <tr>
            <td><p>1</p></td>
            <td><p>2</p></td>
            <td><p>3</p></td>
         </tr>
      </table>
   </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can’t relative position TD’s so instead you need to put an surrounding container for the P’s:

    <td><div><p>1</p></div></td>
<td><div><p>2</p></div></td>
<td><div><p>3</p></div></td>

    Then in CSS:

    td div { position: relative }
    • 0