Question

我有这个表布局。我想将整个内容与右边对齐。所以我正在使用一个width: 100%;的单元格。通常一切看起来都很好但有一些我不明白的东西。如果具有colspan的单元格中的内容变得比此列中的正常单元格大（您可以通过单击Click to test button进行测试），则会制动整个布局。
这种情况发生在Chrome，Safari 4和5，IE8上，但在Opera，FF和IE7上都可以。

有什么想法吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>TEST</title>
    <style type="text/css">
        table { width: 100%; }
        table td { border: 1px solid black; white-space: nowrap; }
        .delimiter { width: 100%; }
    </style>
    </head>
    <body>
        <table>
            <tr>
                <td><label>Row 1</label></td>
                <td>&nbsp;</td>
                <td><input type="text" value="Field 1" id="field1" size="25"></td>
                <td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;"></td>
                <td class="delimiter">&nbsp;</td>
            </tr>
            <tr>
                <td><label>Row 2</label></td>
                <td>&nbsp;</td>
                <td colspan="3"><input type="text" id="field2" value="Field 2" size="25"></td>
            </tr>
        </table>
    </body>
</html>

Answer 1

当你说它在某些浏览器而不是其他浏览器中工作时，我并不感到惊讶。欢迎来到开发Web应用程序的真实世界。我没有深入研究为什么浏览器以不同的方式刷新它们的布局，因为我已经知道它可能是一个黑洞的时间。相反，我提出了以下解决方案：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST</title>
<style type="text/css">
    table { width: 100%; }
    table td { border: 1px solid black; white-space: nowrap; }
    .delimiter { width: 100%; }
</style>
</head>
<body>
    <table>
        <tr>
            <td><label>Row 1</label></td>
            <td>&nbsp;</td>
            <td class="delimiter">
                <table><tr>
                    <td><input type="text" value="Field 1" id="field1" size="25" /></td>
                    <td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;" /></td>
                    <td class="delimiter">&nbsp;</td>
                </tr></table>
            </td>
        </tr>
        <tr>
            <td><label>Row 2</label></td>
            <td>&nbsp;</td>
            <td>
                <table><tr>
                    <td><input type="text" id="field2" value="Field 2" size="25" /></td>
                    <td class="delimiter">&nbsp;</td>
                </tr></table>
            </td>
        </tr>
    </table>
</body>
</html>

我知道这不是最漂亮的解决方案，但作为原始HTML，它确实有效。在Chrome和IE10中测试过。

Answer 2

使用跨浏览器编码可以更加节省W3C标准。对于javascript代码跨浏览器安全的Beste解决方案是用户jQuery。对于这种工具/功能来说，它更加方便。

100％宽度的表格单元格

2 个答案: