When the position of td is set to relative, it starts overflowing beyond the boundaries of the table

Question

When the position of td is set to relative, it starts overflowing beyond the boundaries of the table

HTML

<table>
    <tr>
        <td>items</td>
        <td class="right">more items</td>
    </tr>
</table>

CSS

table
{
    border:10px solid green;
}
td
{
    padding:20px;
    background-color:gray;
}
.right
{
    position:relative;
}

The code shows a consistent green border for Chrome 13, Safari 5, and IE7 browsers. However, it appears differently in IE9, IE8, FF5, FF4, and FF3.6.

Is there a way to achieve a uniform border around the table while still maintaining position:relative in the right cell?

html css

Answer 1

Answer №1

By using background clipping, the issue was resolved. Simply add "background-clip: padding-box;" to the th and it will work like a charm.

As per the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip.

"No background is drawn below the border (background extends to the outside edge of the padding)."

Answer 2

By using background clipping, the issue was resolved. Simply add "background-clip: padding-box;" to the th and it will work like a charm.

As per the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip.

"No background is drawn below the border (background extends to the outside edge of the padding)."

Answer 3

Answer №2

Set z-index to -1;

Example on jsfiddle: http://jsfiddle.net/thilakar/L83y3/1/

.right
{
    position:relative;
    z-index:-1
}

Answer 4

Set z-index to -1;

Example on jsfiddle: http://jsfiddle.net/thilakar/L83y3/1/

.right
{
    position:relative;
    z-index:-1
}

Answer 5

Answer №3

It can be challenging to alter the position of a table cell as certain browsers (such as older Safari versions) may override your styles and enforce position: static on table cells and rows.

If you need to position an element absolutely within a table cell, one workaround is to place a relatively positioned <div> (or another block element) inside the cell and then nest everything else inside that:

<table>
    <tr>
        <td>content</td>
        <td><div class="right">more content</div></td>
    </tr>
</table>

You can then adjust the CSS accordingly:

.right {
    position:relative;
    width: 100%;
    height: 100%;
}

For a practical demonstration, visit this live example: http://jsfiddle.net/ambiguous/KUshG/

This solution should resolve the issue you're encountering and potentially preempt any future complications.

Answer 6

It can be challenging to alter the position of a table cell as certain browsers (such as older Safari versions) may override your styles and enforce position: static on table cells and rows.

If you need to position an element absolutely within a table cell, one workaround is to place a relatively positioned <div> (or another block element) inside the cell and then nest everything else inside that:

<table>
    <tr>
        <td>content</td>
        <td><div class="right">more content</div></td>
    </tr>
</table>

You can then adjust the CSS accordingly:

.right {
    position:relative;
    width: 100%;
    height: 100%;
}

For a practical demonstration, visit this live example: http://jsfiddle.net/ambiguous/KUshG/

This solution should resolve the issue you're encountering and potentially preempt any future complications.

Answer 7

Answer №4

Avoid using position property with table cells.

Instead, enclose the content of cells within a relative div:

<table>
    <tr>
        <td>text</td>
        <td class="right">
            <div style="position:relative;">more text</div>
        </td>
    </tr>
</table>

Answer 8

Avoid using position property with table cells.

Instead, enclose the content of cells within a relative div:

<table>
    <tr>
        <td>text</td>
        <td class="right">
            <div style="position:relative;">more text</div>
        </td>
    </tr>
</table>

When the position of td is set to relative, it starts overflowing beyond the boundaries of the table

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

IE is causing CSS divs to be misplaced

Can you explain the functionality of $on.constructor in AngularJS?

PHP does not provide any error when an update on a database row fails

When the "disabled" property is enabled, the <Select> element prevents the scrollbar from appearing

Emails can be sent through a form without the need for refreshing

Display the Full Width of Your Website on iPhones and iPads

Having trouble accessing the value of an item in a dropdown box on a website

ngInfiniteScroll Activates on Every Scroll Occurrence

Creating Blurry Text Effects in HTML (Step-by-Step Tutorial)

jQuery not getting desired response from AJAX GET request

Identifying Memory Leaks in an HTML5 Canvas Application Using JavaScript

Error: The value property is undefined and cannot be read at the HTMLButtonElement

Pulling a Bootstrap 3 Navbar from the side

Desktop users can enjoy the off-canvas menu feature, while mobile users will have access to the accordion menu option with Foundation 6

Center the span in CSS by setting its position to absolute

The compatibility issue with Bootstrap Select 1.13.1 persists, despite being implemented alongside Bootstrap 4

Using CSS to Create Text Wrapping

Python: Collecting all the text from the children of selected elements using Scrapy

Experience the ultimate Safari/iOS responsive design for seamless browsing on all

What is causing the additional space at the bottom?