Question

我无法在IE中正确嵌套到另一个表中，但它在Firefox和Chrome中运行良好。出于某种原因，IE显示具有嵌套表的单元格要宽得多，然后设置为。

我的代码的简化版本：

<table width="575" border="0">
<tbody>
    <tr>
        <td height="10" colspan="3"><span style="FONT-SIZE: 12px"><span style="FONT-FAMILY: Arial">CITY (Arial,  small, all caps), Country (only if city isn't well known, Arial, small) -  Content text (Arial, small) First paragraph is to be full width and above any  images or related boxes, unless there is a lead.<br />
        </span></span></td>
    </tr>
    <tr>
        <td height="10" colspan="3"></td>
    </tr>
    <tr>
        <td width="280"><span style="font-size: 12px;"><span style="font-family: Arial;">Half-width items: Text next to images or related boxes is to match or slightly exceed height of image or related box it sits next to with the tops set to align. First half-width image in an article or any related box goes on the right side of the page. </span></span></td>
        <td width="10"></td>
        <td width="260" valign="top">
        <table width="260" border="0">
            <tbody>
                <tr>
                    <td>
                    <div style="width:260px;border:2px groove black;padding:5px;"><strong><span style="font-size: 14px;"><span style="font-family: Arial;">Related Links - Arial, medium, bold</span></span></strong><br />
                    <span style="font-family: Arial;"><span style="font-size: 12px;"><span style="font-size: 2px;"><br />
                    </span>&#160;• To be used when relevant links exist<br />
                    <span style="font-size: 2px;"><br />
                    </span>&#160;• Links to remain one line or shorter<br />
                    <span style="font-size: 2px;"><br />
                    </span>&#160;• Link text - Arial, small, linked<br />
                    </span></span></div>
                    </td>
                </tr>
            </tbody>
        </table>
        </td>
    </tr>
    <tr>
        <td height="10" colspan="3"></td>
    </tr>
</tbody>

感谢您的帮助。我只是想不通为什么IE不能和其他浏览器一样播放。

Answer 1

仅供参考，您可以在不使用表格的情况下在CSS中实现此目的。

我将宽度从像素更改为百分比，现在在IE中工作正常......

    <tr>
        <td width="44%"><span style="font-size: 12px;"><span style="font-family: Arial;">Half-width items: Text next to images or related boxes is to match or slightly exceed height of image or related box it sits next to with the tops set to align. First half-width image in an article or any related box goes on the right side of the page. </span></span></td>
        <td width="2%"></td>
        <td width="44%" valign="top">
            <table width="100%" border="0">
                <tbody>
                    <tr>
                        <td>
                        <div style="width:260px;border:2px groove black;padding:5px;"><strong><span style="font-size: 14px;"><span style="font-family: Arial;">Related Links - Arial, medium, bold</span></span></strong><br />
                        <span style="font-family: Arial;"><span style="font-size: 12px;"><span style="font-size: 2px;"><br />
                        </span>&#160;• To be used when relevant links exist<br />
                        <span style="font-size: 2px;"><br />
                        </span>&#160;• Links to remain one line or shorter<br />
                        <span style="font-size: 2px;"><br />
                        </span>&#160;• Link text - Arial, small, linked<br />
                        </span></span></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>

不知道为什么使用colspan="3"而你可以取消两个。

无论如何，测试上面的代码以检查这是否是你所追求的......

感谢。

<强>增加：
我删除了td's的宽度，也可以正常工作。不确定为什么在提供宽度时IE会以不同的方式呈现它。

<tbody>
    <tr>
        <td height="10" colspan="3"><span style="FONT-SIZE: 12px"><span style="FONT-FAMILY: Arial">CITY (Arial,  small, all caps), Country (only if city isn't well known, Arial, small) -  Content text (Arial, small) First paragraph is to be full width and above any  images or related boxes, unless there is a lead.<br />
        </span></span></td>
    </tr>
    <tr>
        <td height="10" colspan="3"></td>
    </tr>
    <tr>
        <td><span style="font-size: 12px;"><span style="font-family: Arial;">Half-width items: Text next to images or related boxes is to match or slightly exceed height of image or related box it sits next to with the tops set to align. First half-width image in an article or any related box goes on the right side of the page. </span></span></td>
        <td></td>
        <td valign="top">
        <table border="0">
            <tbody>
                <tr>
                    <td>
                    <div style="width:265px;border:2px groove black;padding:5px;"><strong><span style="font-size: 14px;"><span style="font-family: Arial;">Related Links - Arial, medium, bold</span></span></strong><br />
                    <span style="font-family: Arial;"><span style="font-size: 12px;"><span style="font-size: 2px;"><br />
                    </span>&#160;• To be used when relevant links exist<br />
                    <span style="font-size: 2px;"><br />
                    </span>&#160;• Links to remain one line or shorter<br />
                    <span style="font-size: 2px;"><br />
                    </span>&#160;• Link text - Arial, small, linked<br />
                    </span></span></div>
                    </td>
                </tr>
            </tbody>
        </table>
        </td>
    </tr>
    <tr>
        <td height="10" colspan="3"></td>
    </tr>
</tbody>

IE中的嵌套表格宽度不正确

1 个答案: