HTML: relative positioned overlapping elements in TD makes TD too wide_问答_开发者

HTML: relative positioned overlapping elements in TD makes TD too wide

开发者 https://www.devze.com 2023-03-27 13:14 出处：网络

开发者_如何学PythonI have code that generates a TABLE that contains relative positioned elements causing elements to overlap in a TD. The TD then appears too wide.

相关专题：

开发者_如何学PythonI have code that generates a TABLE that contains relative positioned elements causing elements to overlap in a TD. The TD then appears too wide.

Here's a short example of the table:

<html><body>
    <table>
        <tr style="background-color: rgb(221, 255, 221)">
            <td style="padding-left:20px;">
                text1
                <select size="1" style="width: 262px">
                    <option></option>
                    <option>12345</option>
                </select>
                <input type="text" size="5" style="position: relative; left: -262px; width: 239px">
                <span style="position: relative; left: -239px">text2</span>

                <input type="text" size="5" style="position: relative; left: -239px">
                <span style="position: relative; left: -239px">text3</span>
                <input type="text" size="5" style="position: relative; left: -239px">
                <span style="position: relative; left: -239px"> </span>
            </td>
            <td>
                info
            </td>
        </tr>
    </table>
</body></html>

The input-element appears above the select-element.

Obviously I don't have any widths set in TD, TR or TABLE. So it's the browser that makes the first column too wide. The width of the empty space seems to be the width of the input-element.

How can I circumvent this? Basically I want the first column only to be as wide as necessary.

My guess is that you want somthing like this:

<html><body>
    <table style="width: auto">
        <tr style="background-color: rgb(221, 255, 221)">
            <td style="padding-left:20px;">
                text1
                <select size="1" style="width: 262px">
                    <option></option>
                    <option>12345</option>
                </select>
                <input type="text" size="5" style="position: relative; left: -262px; width: 239px; margin-right: -262px;">
                <span style="position: relative; left: -239px">text2</span>

                <input type="text" size="5">
                <span>text3</span>
                <input type="text" size="5">
                <span> </span>
            </td>
            <td>
                info
            </td>
        </tr>
    </table>
</body></html>

I'm only moving the one you want to place over the select, and compensate with a negative margin.

Else the width of the table cell would have been the same as when you don't use any positioning.

Update 2011-08-11 13:00:

<html><body>
    <table style="width: auto">
        <tr style="background-color: rgb(221, 255, 221)">
            <td style="padding-left:20px;">
                text1
                <select size="1" style="width: 262px">
                    <option></option>
                    <option>12345</option>
                </select>
                <input type="text" size="5" style="position: relative; left: -262px; width: 239px; margin-right: -242px;">
                <span>text2</span>

                <input type="text" size="5">
                <span>text3</span>
                <input type="text" size="5">
                <span> </span>
            </td>
            <td>
                info
            </td>
        </tr>
    </table>
</body></html>

I forgot to remove the last position on the "text2"-span. And after that i had to to change the negative marig-right a bit, so "text2" did not end up on tom of the long input and the select.