Question

我的代码生成TABLE，其中包含相对定位的元素，导致元素在TD中重叠。 TD然后显得过宽。

以下是该表的简短示例：

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

input - 元素显示在select - 元素上方。

显然，我在TD，TR或TABLE中没有设置任何宽度。所以这是第一列过宽的浏览器。空白空间的宽度似乎是input - 元素的宽度。

我该怎样绕过这个？基本上我希望第一列只是必要的宽度。

Answer 1

我的猜测是你想要这样的事情：

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

我只是移动你要放在选区上的那个，并用负余量补偿。

否则表格单元格的宽度与不使用任何定位时的宽度相同。

更新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>

我忘了删除“text2”-span上的最后一个位置。之后我不得不稍微改变负的marig-right，所以“text2”并没有结束于长输入和选择的tom。

HTML：TD中相对定位的重叠元素使TD太宽

1 个答案: